Question

有没有办法在QueryList上进行简单的更改？我有一个包含在查询列表中的子组件列表。我想检查哪个子组件已添加到列表中（在onchange事件中）。

为父级：

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

当我点击一个按钮时，一个子组件被添加到dom中，因此查询列表会更改触发器。

当我像这样订阅查询列表时：

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个事件，您可以订阅它。然后你可以使用IterableDiffers进行比较

为父级：

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

样本手风琴的在线演示：https://plnkr.co/edit/1xNOvp?p=preview

打开控制台以查看结果

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

Angular2 - 简单更改QueryList

1 个答案: