Angular2：子组件访问父类变量/函数

Question

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

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

像 NgModel 对 NgForm 所做的一些小把戏怎么样？您必须将您的父母注册为提供者，然后将您的父母加载到孩子的构造函数中。

这样，您不必为所有孩子都加上[sharedList]。

// Parent.ts
export var parentProvider = {
    provide: Parent,
    useExisting: forwardRef(function () { return Parent; })
};

@Component({
    moduleId: module.id,
    selector: 'parent',
    template: '<div><ng-content></ng-content></div>',
    providers: [parentProvider]
})
export class Parent {
    @Input()
    public sharedList = [];
}

// Child.ts
@Component({
    moduleId: module.id,
    selector: 'child',
    template: '<div>child</div>'
})
export class Child {
    constructor(private parent: Parent) {
        parent.sharedList.push('Me.');
    }
}

然后是你的 HTML

<parent [sharedList]="myArray">
    <child></child>
    <child></child>
</parent>

您可以在 Angular 文档中找到有关该主题的更多信息：https://angular.io/guide/dependency-injection-in-action#find-a-parent-component-by-injection

Answer 2

你可以这样做 在父组件中声明：

get self(): ParenComponentClass {
        return this;
    }

在子组件中，引入ParenComponentClass之后，声明：

private _parent: ParenComponentClass ;
@Input() set parent(value: ParenComponentClass ) {
    this._parent = value;
}

get parent(): ParenComponentClass {
    return this._parent;
}

然后在父模板中就可以做

<childselector [parent]="self"></childselector>

现在您可以从子级访问父级的公共属性和方法

this.parent

Answer 3

Angular2 文档中关于这个主题的主要文章是：

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child

它涵盖以下内容：

• 使用输入绑定将数据从父级传递给子级

• 使用 setter 拦截输入属性更改

• 使用 ngOnChanges 拦截输入属性更改

• 家长监听子事件

• 父母通过局部变量与孩子互动

• Parent 调用 ViewChild

• 父母和孩子通过服务进行交流

Answer 4

如果您将输入属性数据绑定与 JavaScript 引用类型（例如，Object、Array、Date 等）一起使用，则父级和子级都将引用同一个/一个对象。您对共享对象所做的任何更改都将对父级和子级可见。

在父模板中：

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

在孩子身上：

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

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

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

这个Plunker shows a working example，在父组件和子组件中都有按钮，它们都修改了共享列表。

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

如果你想共享一个原始类型（即字符串、数字、布尔值），你可以把它放入一个数组或一个对象中（即，把它放在一个引用类型中），或者你可以emit()一个事件每当原始值发生变化时，来自子级（即，让父级侦听自定义事件，子级将具有EventEmitter 输出属性。有关更多信息，请参阅@kit 的答案。）

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

Answer 5

基本上，您不能直接从父级访问变量。你通过事件来做到这一点。组件的输出属性对此负责。我建议阅读https://angular.io/docs/ts/latest/guide/template-syntax.html#input-and-output-properties