javascript - 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();
    });
}