gpt4 book ai didi

angular - 如何在 Angular 2 中将对象从一个组件传递到另一个组件?

转载 作者:太空狗 更新时间:2023-10-29 16:46:27 31 4
gpt4 key购买 nike

我有 Angular 组件,第一个组件使用第二个组件作为指令。它们应该共享相同的模型对象,该对象在第一个组件中初始化。如何将该模型传递给第二个组件?

最佳答案

对于从父到子的单向数据绑定(bind),使用@Input 装饰器(风格指南中的recommended)在子组件上指定一个输入属性

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

并在父模板中使用模板属性绑定(bind)

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

由于您正在传递一个对象(JavaScript 引用类型),因此您对父组件或子组件中的对象属性所做的任何更改都将反射(reflect)在另一个组件中,因为这两个组件都引用了同一个对象。我在 Plunker 中展示了这个.

如果在父组件中重新分配对象

this.model = someNewModel;

Angular 会将新对象引用传播到子组件(自动地,作为变化检测的一部分)。

您唯一不应该做的就是重新分配子组件中的对象。如果这样做,父对象仍将引用原始对象。 (如果您确实需要双向数据绑定(bind),请参阅 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 - Angular RC.2

关于angular - 如何在 Angular 2 中将对象从一个组件传递到另一个组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34088209/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com