angular 事件监听文档加载

Question

在加载文档后，我正在尝试 select angular 组件中的所有前置元素。

ngAFterViewChecked、ngAfterContentChecked、ngAfterContentInit基本上在文档加载之前运行了 30 次，这会降低我的应用程序的速度。

因此，剩下 ngAfterViewInit ，从逻辑上讲，它会起作用，但由于文档尚未加载，因此什么也不做。 所以，我在想一个事件监听器，就像在 vanilla js 中一样。

 constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer2
 ) { }

 ngAfterViewInit(): void {

    this.renderer.listen('document', 'load', (event) => {
      console.log("loaded")
      const pres = this.document.querySelectorAll('pre');
      for (var i = 0; i < pres.length; ++i) {
        console.log("Yes!");
      }
    });

  }

这没有按预期工作，但我还没有看到任何其他方法完全尝试这种方式，所以我认为类似的方法可以工作。

注意：我的pre标签是从[innerHTML]="content"中的数据库异步加载的。

有任何想法吗？

Answer 1

您可以使用 RendererFactory2 来执行此操作。 这使您可以附加一个在渲染完成时调用的回调。

constructor(private rendererFactory: RendererFactory2) { }

  ngOnInit() {
    this.rendererFactory.end = () => {
      const pres = this.document.querySelectorAll('pre');
      for (var i = 0; i < pres.length; ++i) {
        console.log("Yes!");
      }
    }
  }

需要注意的是，注入的 RendererFactory2 是 singleton，因此您可能需要调整此代码并将“结束”回调设置为 null，否则它将继续被调用。

更新

发布此内容后，我意识到有更好，更合适的方法来做到这一点。 你可以使用 MutationObserver 来监听 DOM 的变化——比如在 DOM 元素上设置 innerHTML。

这是 MDN 文档

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

幸运的是，Angular CDK 有一个名为 cdkObserveContent 的指令，它实现了 MutationObserver。 文档在这里：

https://material.angular.io/cdk/observers/overview

如果您尚未安装 Angular CDK，则需要安装它并导入 ObserversModule，然后您可以将cdkObserveContent侦听器添加到您要插入 html 的 DOM 元素中。 使用这种方法，只有在插入 html 时才会触发一次侦听器，因此您不必担心多次调用。