Angular 2 : child component access parent class variable/function

Question

我在父组件中有一个变量可能会被子组件更改，父组件将在 View 中使用此变量，因此必须传播更改。

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");
    }
}

Answer 1

如果您使用具有 JavaScript 引用类型(例如，对象、数组、日期等)的输入属性数据绑定(bind)，那么父项和子项都将引用同一个/一个对象。您对共享对象所做的任何更改都将对 parent 和 child 可见。

在父模板中:

<child [aList]="sharedList"></child>

在 child 身上:

@Input() aList;
...
updateList() {
    this.aList.push('child');
}

如果您想在构建子项时将项目添加到列表中，请使用 ngOnInit()钩子(Hook)(不是 constructor()，因为此时数据绑定(bind)属性未初始化):

ngOnInit() {
    this.aList.push('child1')
}

这Plunker shows a working example ，父组件和子组件中的按钮都修改共享列表。

请注意，您不能在 child 中重新分配引用。例如，不要在子组件中这样做:this.aList = someNewArray; 如果您这样做，那么父组件和子组件将分别引用两个不同的数组。

如果你想共享原始类型(即字符串、数字、 bool 值)，你可以将它放入数组或对象(即放入引用类型)，或者你可以 emit( ) 每当原始值发生变化时，来自 child 的事件(即，让 parent 监听自定义事件， child 将拥有 EventEmitter 输出属性。有关更多信息，请参阅@kit 的回答信息。)

更新 2015/12/22:Structural Directives 中的heavy-loader 示例指南使用我上面介绍的技术。主/父组件具有绑定(bind)到子组件的 logs 数组属性。子组件 push() 到该数组，父组件显示该数组。