Question

我在组件中有一个QueryList。我正在动态添加其他组件，这些组件将出现在QueryList中，但如果我订阅changes的{{1}}，则不会发生任何事情。我认为这是因为我订阅了QueryList，但ngAfterViewInit仍然是QueryList undefined。 Here I have the plunkr

代码：

ngOnInit

Answer 1

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

这是更新示例的plunkr - 注意工厂现在有一个setter，它证明它是预先填充的（你通常不需要它在一个真正的应用程序中，那只是为了找出来自哪个值）框架）

我认为这是一种完全有效的行为。所以在ngAfterViewInit中，循环查询列表中的值并执行与订阅者相同的操作：

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 2

在对查询列表中的对象进行更改后，应调用查询列表以通知更改。

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

Answer 3

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

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

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

QueryList更改订阅不起作用

3 个答案: