Angular2：子组件访问父类变量/函数 [英] Angular2: child component access parent class variable/function

问题描述

我在父组件的变量可能由孩子来改变，父母会使用视图这个变量，因而具有传播的变化。

 进口{组件，查看}从'angular2 /核心;@Component（{选择：'父'}）
@视图（{
    指令：[儿童]
    模板：`＆LT; childcomp＆GT;＆LT; / childcomp＆GT;`
}）
类父{
    公共sharedList =新的Array（）;
    构造函数（）{
    }
}
@Component（{选择：'孩子'}）
@View（{模板：`...`}）
类儿童{
    构造函数（）{
        //从母公司获得sharedList和设定值
        sharedList.push（1）;
        sharedList.push（2）;
        sharedList.push（3）;
        sharedList.push（4）;
    }
}
 

解决方案

如果您使用的输入数据绑定属性与一个JavaScript引用类型（例如，对象，数组，日期等），然后是父母和孩子都将有一个参照相同的/一个对象。您对共享对象的任何更改将是双方父母和孩子可见。

在父母的模板：

 ＆LT;儿童[ALIST] =sharedList＆GT;＆LT; /儿童＆GT;
 

在孩子：

  @input（）ALIST;
...
updateList（）{
    this.aList.push（'孩子'）;
}
 

如果您想在构造孩子将项目添加到列表中，使用的 ngOnInit（） 钩子（不是构造函数（），因为数据绑定属性不会在这一点上初始化）：

  ngOnInit（）{
    this.aList.push（child1）
}
 

本<大骨节病> plunker 显示了一个工作示例，与父和子组件按钮，无论修改共享列表。

请注意，在孩子你不能重新分配的参考。如不这样做的孩子： this.aList = someNewArray; 如果你这样做，那么家长和孩子组件将各有两个不同的数组引用。

如果你想分享一个基本类型（例如，字符串，数字，布尔值），你可以把它变成一个数组或对象（也就是把它引用类型中），或者你可以 EMIT（）从孩子的事件每当原始值变化（即有家长监听自定义事件，孩子将有一个 EventEmitter 输出属性。见@套件的回答获得更多信息。）

更新 2015年12月22日：在重型装载机示例中的的结构指令指导使用I $ p $上面psented的技术。主/父组件有一个日志绑定到子组件数组属性。子组件推（）到该数组，而父组件显示阵列。

I have a variable in the parent component that might be changed by child, parent will be using this variable in the view and thus has to propagate changes.

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

解决方案

If you use input property databinding with a JavaScript reference type (i.e., Object, Array, Date, etc.), then the parent and child will both have a reference to the same/one object. Any changes you make to the shared object will be visible to both parent and child.

In the parent's template:

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

In the child:

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

If you want to add items to the list upon construction of the child, use the ngOnInit() hook (not the constructor(), since the data-bound properties aren't initialized at that point):

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

This plunker shows a working example, with buttons in the parent and child component that both modify the shared list.

Note, in the child you must not reassign the reference. E.g., don't do this in the child: this.aList = someNewArray; If you do that, then the parent and child components will each have references to two different arrays.

If you want to share a primitive type (i.e., string, number, boolean), you could put it into an array or an object (i.e., put it inside a reference type), or you could emit() an event from the child whenever the primitive value changes (i.e., have the parent listen for a custom event, and the child would have an EventEmitter output property. See @kit's answer for more info.)

Update 2015/12/22: the heavy-loader example in the Structural Directives guides uses the technique I presented above. The main/parent component has a logs array property that is bound to the child components. The child components push() onto that array, and the parent component displays the array.

这篇关于Angular2：子组件访问父类变量/函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！