私は持っている角度付きコンポーネントそして最初のコンポーネントは2番目のコンポーネントを指令同じモデルを共有する必要がある物体最初のコンポーネントで初期化されます。そのモデルを 2 番目のコンポーネントに渡すにはどうすればよいですか?
ベストアンサー1
親から子への一方向のデータバインディングには、デコレータ@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'; }
}
Plunker- 角度RC.2