2016-04-07 3 views
0

私たちはangular2で使用される `[()]`構文は何ですか?

<div>{{a_variable_i_want_to_show}}</div> 

のようにテンプレートの文字列に変数を変換するための

<div (click)="doSomething()"> 

または

<div (blur)="doSomethingElse()"> 

{{}}のようなイベントを検出するための

()を使用する知っているが、何をすべきか我々はを使用するng-modelでの双方向バインディングの他にはありますか?

一般的な使用法はありますか?

+7

箱に入ったバナナ! –

+0

ジョンパパは面白い男です。 –

答えて

3

これは双方向バインディングです。チェックアウト:

双方向データバインディングを設定します。コンポーネントプロパティおよびDOMフォーム要素間の双方向データバインディングをセットアップ[()] NgModel、一緒に使用<my-cmp [title]="name" (titleChange)="name=$event">

0

:に相当します。コンポーネントプロパティに加えた変更は自動的にDOMに伝播され、フォーム要素(つまりDOM)に対する変更はコンポーネントプロパティに自動的に伝播されます。

コンポーネントとともに使用すると、[()]は、親コンポーネントプロパティと子コンポーネントプロパティの間に双方向データバインディングを設定します。親コンポーネントのプロパティに行った変更は、自動的にDOMに伝播されます。ただし、子コンポーネントのプロパティに加えた変更はではなく、は親に自動的に伝達されます– emit()を使用する必要があります。したがって、NgModelとは少し異なります。

子コンポーネントは、入力プロパティと出力プロパティ(EventEmitter)を定義する必要があります。入力プロパティの名前がxの場合、出力プロパティの名前はxChangeである必要があります。子コンポーネントは、xChange.emit(newValue)を呼び出すことによって、xへの変更を明示的に発行する必要があります。

[(childProp)]="parentProp"[childProp]="parentProp" (childPropChange)="parentProp=$event"の略語であるため、名前を付ける必要があります。

新しい値が子から生成されたときに親のロジックを実行する必要がある場合は、拡張フォーム:[childProp]="parentProp" (childPropChange)="doSomething($event)"を使用します。

関連する問題