我在父组件中有一个变量，可能会被子项更改，父组件将在视图中使用此变量，因此必须传播更改。
import {Component, View} from 'angular2/core';
@Component({selector: 'parent'})
@View({
directives: [Child],
template: `<childcomp></childcomp>`
})
class Parent {
public sharedList = new Array();
constructor() {
}
}
@Component({selector: 'child'})
@View({template: `...`})
class Child {
constructor() {
//access 'sharedList' from parent and set values
sharedList.push("1");
sharedList.push("2");
sharedList.push("3");
sharedList.push("4");
}
}
如果将输入属性数据绑定与JavaScript引用类型（例如，对象，数组，日期等）一起使用，则父级和子级都将具有对同一对象/一个对象的引用。您对共享库所做的任何更改对父级和子级都可见。
在父母的模板中：
<child [aList]="sharedList"></child>
在孩子中：
@Input() aList;
...
updateList() {
this.aList.push('child');
}
如果要在构造子项时将项目添加到列表中，请使用ngOnInit()钩子（而不是Constructor（），因为此时未绑定数据绑定的属性）：
ngOnInit() {
this.aList.push('child1')
}
此Plunker显示了一个工作示例，在父组件和子组件中的按钮均修改了共享列表。
请注意，在孩子中，您不得重新分配参考。例如，不要在子级中执行此操作：this.aList = someNewArray;如果这样做，则父级和子级组件将分别引用两个不同的数组。
如果要共享基本类型（例如，字符串，数字，布尔值），则可以将其放入数组或对象中（例如，将其放入引用类型中），也可以emit()在原始对象出现时从孩子那里获得一个事件值更改（即，让父级监听自定义事件，而子级则具有EventEmitteroutput属性。有关更多信息，请参见@kit的答案。）
2015年12月22日更新：《结构指令》指南中的heavy-loader示例使用了我上面介绍的技术。主/父组件具有绑定到子组件的array属性。子组件位于该数组上，父组件显示该数组。logspush()
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句