时间戳

首页 > 解决方案 > 加载了角度事件侦听器文档

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".

有任何想法吗？

标签： angulareventsangular10queryselectorangular-renderer2

解决方案

您可以使用 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 是一个单例，因此您可能必须调整此代码并将“结束”回调设置为 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 时触发一次，因此您不必担心多次调用。

推荐阅读