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

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

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()

像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

您可以在父组件中声明：

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

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

Angular2文档中有关此主题的主要文章是：

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

它涵盖以下内容：

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

• 用设置器截取输入属性的更改

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

• 家长听孩子活动

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

• 父母称一个ViewChild

• 父母与子女通过服务进行沟通