QueryList 更改订阅不起作用

Question

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

Here I have the plunkr.

代码:

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

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

Answer 1

更改查询列表中的对象后，您应该调用查询列表以通知更改。

update() {
  this.factories.forEach(factory => {
    console.log(factory.componentRef.instance.model.data = "alma")
  //  factory.()
  this.factories.notifyOnChanges();
  })
}

Answer 2

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

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

我认为这是完全正确的行为。因此，在 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)
}

Answer 3

您也可以这样添加startWith(undefined)：

ngAfterViewInit() {
  this.factories.changes.pipe(startWith(undefined)).subscribe(() => 
  {
     console.log('changed')
  })
}

这将立即触发订阅处理程序。

QueryList 更改订阅不起作用

QueryList changes subscribe does not work

angular

typescript

eventemitter