angular 事件侦听器文档已加载

Question

我正在尝试 select angular 组件 AFTER 中的所有 pre 元素已加载。

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是单例的，所以您可能需要调整此代码并在完成后将 'end' 回调设置为 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 侦听器添加到 DOM 元素您正在将 html 插入。使用这种方法，侦听器只会在插入 html 时触发一次，因此您不必担心多次调用。

angular 事件侦听器文档已加载

angular event listener document loaded

angular

events

angular10

queryselector

angular-renderer2