加载了角度事件侦听器文档

Question

我正在尝试选择角度组件中的所有 pre 元素AFTER文档已加载。

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