Angular2：子组件访问父类variables/函数
我有一个父组件中的variables，可能会由孩子改变，父母将在视图中使用此variables，因此必须传播更改。
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引用types（例如，Object，Array，Date等）的input属性数据绑定，那么父级和子级都将引用相同/一个对象。 您对共享对象所做的任何更改都将对父级和子级都可见。
在父母的模板中：
<child [aList]="sharedList"></child>
在小孩：
@Input() aList; ... updateList() { this.aList.push('child'); }
如果要在构build子项时将项目添加到列表中，请使用ngOnInit()挂钩（不是构造函数（），因为数据绑定属性在此处未初始化）：
ngOnInit() { this.aList.push('child1') }
这个Plunker显示了一个工作的例子 ，父，子组件中的button都修改共享列表。
请注意，在小孩中，您不得重新分配参考。 例如，不要在孩子中这样做： this.aList = someNewArray; 如果你这样做，那么父子组件将分别引用两个不同的数组。
如果你想共享一个原始types（即string，数字，布尔值），你可以把它放到一个数组或一个对象中（也就是把它放在一个引用types中），或者你可以从这个子类emit()一个事件每当原始值发生变化时（例如，让父节点监听一个自定义事件，并且该子EventEmitter将具有一个EventEmitter输出属性。有关更多信息，请参阅EventEmitter的答案。
2015/12/22 更新 ： Structural Directives指南中的heavy-loader示例使用上面介绍的技术。 主/父组件具有绑定到子组件的logs数组属性。 子组件push()到该数组上，父组件显示该数组。
NgModel有一些小小的诡计呢，NgForm呢？ 你必须注册你的父母作为提供者，然后加载你的父母在孩子的构造函数。
这样，你不必把[sharedList]放在你所有的孩子[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>
基本上你不能直接访问父variables。 你通过事件做到这一点。 组件的输出属性负责这个。 我build议阅读https://angular.io/docs/ts/latest/guide/template-syntax.html#input-and-output-properties
你可以这样做在父组件声明：
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
关于这个主题的Angular2文档中的主要文章是：
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child
它包括以下内容：
-
通过input绑定将数据从父项传递给子项
-
用setter截取input属性的变化
-
用ngOnChanges拦截input属性更改
-
父母监听孩子的事件
-
父母通过局部variables与孩子交互
-
父母调用ViewChild
-
家长和孩子通过服务进行交stream
