Angular 2でオブジェクトをあるコンポーネントから別のコンポーネントに渡すにはどうすればいいですか? 質問する

親から子への一方向のデータバインディングには、デコレータ@Input（推奨子コンポーネントの入力プロパティを指定するには、スタイルガイドに従って

@Input() model: any;   // instead of any, specify your type

親テンプレートでテンプレートプロパティバインディングを使用する

<child [model]="parentModel"></child>

オブジェクト（JavaScriptの参照型）を渡しているので、親コンポーネントまたは子コンポーネントのオブジェクトプロパティに加えた変更は、両方のコンポーネントが同じオブジェクトへの参照を持っているため、他のコンポーネントにも反映されます。プランカー。

親コンポーネント内のオブジェクトを再割り当てする場合

this.model = someNewModel;

Angular は、新しいオブジェクト参照を子コンポーネントに伝播します (変更検出の一環として自動的に)。

唯一してはいけないことは、子コンポーネントでオブジェクトを再割り当てすることです。これを行うと、親は元のオブジェクトを参照し続けます。（双方向データバインディングが必要な場合は、https://stackoverflow.com/a/34616530/215945）。

@Component({
  selector: 'child',
  template: `<h3>child</h3> 
    <div>{{model.prop1}}</div>
    <button (click)="updateModel()">update model</button>`
})
class Child {
  @Input() model: any;   // instead of any, specify your type
  updateModel() {
    this.model.prop1 += ' child';
  }
}

@Component({
  selector: 'my-app',
  directives: [Child],
  template: `
    <h3>Parent</h3>
    <div>{{parentModel.prop1}}</div>
    <button (click)="updateModel()">update model</button>
    <child [model]="parentModel"></child>`
})
export class AppComponent {
  parentModel = { prop1: '1st prop', prop2: '2nd prop' };
  constructor() {}
  updateModel() { this.parentModel.prop1 += ' parent'; }
}