angular - La suscripción a cambios de QueryList no funciona

Tengo un QueryList en un componente. Estoy agregando dinámicamente otros componentes, que estarán presentes en el QueryList, pero si me suscribo a los changes del QueryList, no pasa nada. Pensé que era porque me suscribí en ngAfterViewInit, pero el QueryList todavía es undefined en ngOnInit.

Aquí tengo el plunkr.

Código:

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

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

Respuesta #1

La cuestión es que la lista que llega a tu propiedad factories ya está pre-poblada. Así que simplemente no tienes la oportunidad de suscribirte a sus cambios antes de que se llene por primera vez. Pero todos los cambios que ocurren después, por supuesto, llegan a tu suscriptor.

Aquí está el plunkr con tu ejemplo actualizado: observa que factories ahora tiene un setter, lo que demuestra que está prellenado (normalmente no lo necesitas en una aplicación real, eso es solo para averiguar qué valor proviene del framework)

Creo que es un comportamiento totalmente válido. Así que en ngAfterViewInit, recorre los valores en el QueryList y haz lo mismo que estás a punto de hacer en el suscriptor:

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

Respuesta #2

También puedes agregar startWith(undefined) así:

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

Esto activará el manejador de suscripciones inmediatamente.