は、どのように私は、この入力を持つコンポーネントを持って@Input値の変更

Question

をキャッチする：

@Input() list: Array<string> 

がどのように私は親コンポーネントは、この入力値を変更したときにキャッチすることができますか？値は角度の結合を介して外部から変化させたとき

Answer 1

OnChanges

ngOnChanges(changes) { 
    console.log(changes); 
} 

ngOnChangesを実装のみ呼ばれます。

あなたはそれが他で変更されたときにコードを実行したい場合は、また、この場合にのみ、別の配列と同じ配列に加えられた変更を、カバーしています

_list:Array<string>; 
@Input() 
set input(newVal:Array<string>) { 
    this._list = newVal; 
    doSomething(); 
} 

get input()Array<string> { 
    return this._list; 
} 

のようなゲッター/セッターを作ることができることを意味し_listに割り当てられます。

Answer 2

ngDoCheckを実装して、アレイの更新が追加された（追加または削除された）ときに手動で検出することができます。 defaut Angular2は参照では動作し、コンテンツでは動作しないため、このケースは検出されません。

@Component({ 
    (...) 
}) 
export class SomeComponent implements DoCheck { 
    @Input() list: Array<string>; 

    constructor(private differ:KeyValueDiffer) { 
    } 

    ngDoCheck() { 
    var changes = this.differ.diff(this.list); 
    if (changes) { 
     changes.forEachAddedItem(r => { 
     // element added in the input array 
     }); 
     changes.forEachRemovedItem(r => { 
     // element removed in the input array 
     }); 
    } 
} 

ngForディレクティブは、このメカニズムに依存しています。

このplunkr：http://plnkr.co/edit/LVQqpjbLENZ7AZ2a6OTt?p=previewを参照してください。

Answer 3

「変更」とは、変更ごとに新しい配列を割り当てる（つまり、変更できないパターンに従う）か、同じ配列を操作するか（つまり、単一の要素の操作アレイ）？

不変の場合は、ライフサイクルフックOnChanges（Günterの回答）を使用し、そうでない場合はDoCheck（Thierryの回答）を使用します。 ngDoCheck()は、変更検出が実行されるたびに呼び出されるため、必要な場合にのみ使用してください。

ライフサイクルフックdevのガイドはかなりよくこれらのケースをカバーして– OnChanges、DoCheck –彼らはどのようにティエリの回答のようにDoCheckでIterableDifferを使用する方法を紹介しませんが。