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 の参照型 (オブジェクト、配列、日付など) で input プロパティのデータバインディングを使用する場合、親と子の両方が同じ/1 つのオブジェクトへの参照を持つことになります。 共有オブジェクトに加えたすべての変更は、親と子の両方から見えるようになります。

親のテンプレートで

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

子では

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

子プロセスの構築時にリストに項目を追加したい場合は、子プロセスの構築時に ngOnInit() フックを使ってください (この時点ではデータバインドプロパティは初期化されないので、コンストラクタ() ではありません)。

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

これは プランカーは、動作例を示す であり、親コンポーネントと子コンポーネントの両方で共有リストを変更するボタンがあります。

注意：子コンポーネントでは、参照を再割り当てしてはいけません。 例えば、子でこんなことをしてはいけません。 this.aList = someNewArray; もしそうしてしまうと、親と子のコンポーネントがそれぞれ2つの異なる配列への参照を持つことになります。

プリミティブ型（文字列、数値、ブーリアンなど）を共有したい場合は、配列やオブジェクトに入れる（つまり、参照型の中に入れる）か、あるいは emit() を使用して、プリミティブ値が変化するたびに子からイベントを受け取るようにします (つまり、親がカスタムイベントをリッスンし、子には EventEmitter 出力プロパティを持ちます。 詳しくは @kit の回答を参照してください)。

アップデートについて 2015/12/22:この heavy-loader の例では 構造体ディレクティブ ガイドの例では、上で紹介したテクニックを使用しています。 主/親コンポーネントには logs の配列プロパティがあり、これが子コンポーネントにバインドされています。 子コンポーネントは push() をその配列の上に配置し、親コンポーネントはその配列を表示します。