3

Angular2 テンプレート構文に関する Victor Savkin の投稿から、入力および出力プロパティ バインディングの使用方法を示します -

<todo-cmp [model]="todo" (complete)="onCompletingTodo(todo)"></todo-cmp>

@Component({selector: 'todo-cmp'})
class TodoCmp {
  @Input() model;
  @Output() complete = new EventEmitter(); // TypeScript supports initializing fields
}

入力プロパティは @Input() で装飾され、出力プロパティには @Output() があります。2 方向のプロパティ バインディングを持つプロパティをどのように宣言すればよいですか? 例: rootpanel コンポーネントに「suggestions」プロパティ (文字列型) があり、searchPanel に「getSuggestions」プロパティがあるとします。ここで、2 つのプロパティを双方向でバインドしたいと考えています。私は試した -

rootpanel.html:

<search-panel [(getSuggestions)]="suggestions"> </search-panel>

しかし、searchPanel コンポーネントで getSuggestions プロパティを宣言しているときに行き詰まりました。また、 getSuggestions プロパティのタイプは何string or EventEmitter<string>ですか?

提案してください。

4

3 に答える 3

4

親コンポーネントから双方向のモデル バインディングが必要な場合:

[(model)]

子コンポーネントには次のものが必要です。

@Input() model: string;
@Output() modelChange:EventEmitter<string>;

子コンポーネントでモデルが上書きされた時点で、次のmodelChangeイベントを発行します。

updateModel(newValue:string) {
    this.model = newValue;
    this.modelChange.emit(this.model);
}

親コンポーネントの観点から[(model)]は、次と同等です。

[model]="model"  (modelChange)="model=$event"

このように、モデル プロパティが子コンポーネント内で変更されると、モデルの変更は双方向バインディングを介して上方に伝播し、途中でバインドされたすべてのモデルが同期されます。

于 2016-01-15T11:16:10.417 に答える
2

[(getSuggestions)]双方向バインディングに -styleを使用する場合は、フィールドを次のように宣言します

class TodoCmp {
  @Input() getSuggestions;
  @Output() getSuggestionsChange = new EventEmitter(); 

  onClick() {
    getSuggestions = 'someValue';
    getSuggestionsChange.emit(getSuggestions);
  }
}

getSuggestionsおそらく、このような入力/出力の組み合わせには適していませんが、それらがどのように接続されているかを示す必要があります。出力は、入力と同じ名前に を追加する必要がありますChange。この命名スキームが合わない場合は、次のようにコンポーネントを使用してください

<search-panel [suggestions]="suggestions" (getSuggestions)="updateSuggestions($event)> </search-panel>

のような入力/出力

class TodoCmp {
  @Input() suggestions;
  @Output() getSuggestions = new EventEmitter(); 

  onClick() {
    suggestions = 'someValue';
    getSuggestions.emit(getSuggestions);
  }
}
于 2016-01-15T11:17:06.890 に答える