Angular2 - Simple changes QueryList

Question

QueryListで簡単な変更を行う方法はありますか？私はクエレリストで保持している子コンポーネントのリストを持っています。どの子コンポーネントがリストに追加されたのかをチェックしたい（onchangeイベント内）。

のparentComponent：

@ContentChildren(forwardRef(() => ChildComponent), { descendants: true }) 
    private childComponents: QueryList<ChildComponent>; 

querylistトリガーを変更するので、私はchildcomponentがDOMに追加されるボタンをクリックします。

が、私はそうのようquerylistを購読すると：

this.childComponents.changes.subscribe((changes) => { 
     //here i just get the updated list. I don't have the previous list to compare. 
}); 

Answer 1

リストQueryListはchangesイベントがあり、あなたはそれを購読することができます。サンプルアコーディオンのため

@ContentChildren(forwardRef(() => ChildComponent), { descendants: true }) 
private childComponents: QueryList<ChildComponent>; 

constructor(private differs: IterableDiffers) { 
    this.differ = this.differs.find([]).create(null); 
} 

//いくつかの方法で

this.childComponents.changes.subscribe((changes) => { 
    let changeDiff = this.differ.diff(changes); 
    if (changeDiff) { 
     changeDiff.forEachAddedItem((change) => { // added item 
     }); 
     changeDiff.forEachRemovedItem((change) => { // removed item 
     }); 
    } 
}); 

オンラインデモ：あなたは

のparentComponentを比較するためのIterableDiffersを使用できhttps://plnkr.co/edit/1xNOvp?p=preview

を引き起こす見るためにあなたのコンソールを開き

https://angular.io/docs/ts/latest/api/core/index/IterableDiffers-class.html