angular - QueryList 更改订阅不起作用

Question

我在组件中有一个 QueryList。我正在动态添加其他组件，这些组件将出现在 QueryList 中，但如果我订阅 QueryList 的 changes，则什么也不会发生。我认为这是因为我在 ngAfterViewInit 中订阅了，但是 QueryList 在 ngOnInit 中是 undefined。

Here I have the plunkr .

代码:

@Component({
  ...
})
export class AppComponent {

    @ViewChildren(ControlFactoryDirective) factories:
        QueryList<ControlFactoryDirective>
    
    ngAfterViewInit() {
      this.factories.changes.subscribe(() => {
        console.log('changed')
      })
    }
}

Answer 1

事实是，您的 factories 属性的列表已经预先填充。因此，在它首次填充之前，您没有机会订阅它的更改。。但当然，所有后来发生的变化都会传递给您的订阅者。

这是 plunkr更新您的示例 - 请注意，工厂现在有一个 setter 证明它已预先填充(您通常不需要在真实应用程序中使用它，那只是为了找出来自框架的值(value))

我认为这是一个完全有效的行为。因此，在 ngAfterViewInit 中，遍历 QueryList 中的值并执行您将要在订阅者中执行的相同操作:

ngAfterViewInit() {
  this.processChildren(); // first call to processChildren

  this.factories.changes.subscribe(_ => 
      this.processChildren() // subsequent calls to processChildren
  );
}

private processChildren(): void {
  console.log('Processing children. Their count:', this.factories.toArray().length)
}