Angular：等到所有子组件都渲染完毕后再运行代码

Question

我有一个位于应用程序顶层的指令，并通过查询元素document.querySelector并将它们传递给fromEvent. 问题是，当指令中的代码ngAfterViewInit运行时，DOM 尚未完全呈现，因此元素查询返回 null。

setTimeout我可以在任意时间内运行代码，但这似乎不是一个可持续且灵活的解决方案。

关于如何优雅地处理这个问题有什么想法吗？

现在，我的代码看起来像这样的一些变体：

ngAfterViewInit() {
  const trackedEl = document.querySelector('#myInput');
  const input$ = fromEvent(trackedEl, 'input')
    .pipe(
      map((inputEvent: any) => inputEvent.target.value)
    )
    .subscribe((v) => {
      console.log(`Got to the observable:: ${v}`, count++);
    })
}

Answer 1

我最终找到了我正在寻找的解决方案。

子元素未及时呈现可能是因为它们正在响应一些尚未返回响应的未完成的 http 事件。在阅读了更改检测和ngZone的文档后，看起来未完成的 http 事件被视为“微任务”。

下面的代码对我有用。

ngOnInit() {
    this.ngZone.onMicrotaskEmpty.pipe(take(1)).subscribe((a) => {
      this.initiateElementEventListeners();
    });
}