Angular 2 TIPS

Angular 2 TIPS

要素オブジェクトのプロパティに値をバインドするには?(Property Binding)

2017年1月30日

要素のプロパティに値をバインドするProperty Bindingについて、「[プロパティ名] = "式"」「bind-プロパティ名 = "式"」「{{プロパティ名}}」という3つのバインディング構文を説明する。

  • このエントリーをはてなブックマークに追加

 Property Bindingを利用することで、要素*1のプロパティに値をバインドすることができます。例えば以下は、<a>要素のhrefプロパティに対して、AppComponentコンポーネントのurlプロパティをバインドする例です。

  • *1 ここではHTML要素を例にしていますが、自作コンポーネントのプロパティに対して値をバインドすることもできます。具体的な例については、後日別稿で解説の予定です。
TypeScript
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<a [href]="url">サポートサイトへ</a>`
})
export class AppComponent {
  url = 'http://www.wings.msn.to/';
}
HTML
<a ……省略…… href="http://www.wings.msn.to/">サポートサイトへ</a>
実行結果のHTMLソース(該当箇所の抜粋)

 Property Bindingでは、対象となるプロパティをブラケットで括るのが基本です。

[構文]Property Binding

[プロパティ名] = "式"

 式のコンテキストはコンポーネントのインスタンスなので、この場合であれば、単に「url」とすることで、AppComponentコンポーネントのurlプロパティを参照しなさい、という意味になります。その他、式の制限については、別稿「TIPS:コンポーネントの値をビューに反映させるには?」も併せて参照してください。

Property Bindingの別構文

 別解として、以下の構文を利用することもできます。

1bind-xxxxx属性

 「bind-プロパティ名="式"」でも、式をプロパティに割り当てることが可能です。例えば冒頭の例であれば、以下のように表せます。

TypeScript
@Component({
  selector: 'my-app',
  template: `<a bind-href="url">サポートサイトへ</a>`
})
bind-xxxxx属性を利用した場合のコード(app/app.component.ts)
2{{...}}

 プロパティ値に対して別稿で利用した{{...}}(ブラケット構文)を利用することも可能です。

TypeScript
@Component({
  selector: 'my-app',
  template: `<a href="{{url}}">サポートサイトへ</a>`
})
{{...}}を利用した場合のコード(app/app.component.ts)

 いずれの構文を利用するかは好みにもよりますが、まずはアプリの中では統一していくべきです。本連載では、ブラケット構文を優先して利用していきます。

処理対象:テンプレート構文(Template Syntax) カテゴリ:基本
処理対象:Property Binding(プロパティバインディング) カテゴリ:テンプレート構文(Template Syntax)
処理対象:バインディング構文(Binding Syntax) カテゴリ:テンプレート構文(Template Syntax)
処理対象:[プロパティ名] = "式"|bind-プロパティ名 = "式"|{{プロパティ名}} カテゴリ:テンプレート構文(Template Syntax) > バインディング構文(Binding Syntax)

※以下では、本稿の前後を合わせて5回分(第4回~第8回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

4. コンポーネントの値をビューに反映させるには?({{...}})

JavaScriptのオブジェクトをHTMLテンプレートに結び付けるためのデータバインドを記述するためのInterpolation記法の基礎を解説する。

5. ビューの中で「安全に」プロパティ/メソッドにアクセスするには?(「?.」演算子)

プロパティやメソッドを呼び出す際にレシーバーオブジェクトがnullでないことを確認した上で呼び出せる「?.」演算子の基本的な使い方を解説する。

6. 【現在、表示中】≫ 要素オブジェクトのプロパティに値をバインドするには?(Property Binding)

要素のプロパティに値をバインドするProperty Bindingについて、「[プロパティ名] = "式"」「bind-プロパティ名 = "式"」「{{プロパティ名}}」という3つのバインディング構文を説明する。

7. ビューにHTML文書をバインドするには?(Property Binding)

プロパティバインディングでHTMLタグを含む文字列にバインドした場合、デフォルトでサニタイズされる挙動を確認。逆に意図的にサニタイズさせない方法を説明する。

8. 要素の属性に値をバインドするには?(Attribute Binding)

HTML要素の属性に対応するプロパティではなく、属性そのものにバインディングする方法を説明する。

イベント情報(メディアスポンサーです)

Azure Central の記事内容の紹介

GrapeCity Garage 記事内容の紹介

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社