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 時才會觸發一次偵聽器，因此您不必擔心多次調用。