如何通过@HostListener监听div元素加载事件而非window加载？

你写的 @HostListener('content:load') 这种方式不可行，原因很简单：<div> 这类普通元素本身不会触发 load 事件——load 事件仅针对加载外部资源的元素（比如 <img>、<script>、<iframe>），或是 window/document 对象。

以下是几种符合需求的可行方案：

方案1：监听组件视图初始化（适合仅需确认div本身加载完成） #

利用Angular的生命周期钩子 AfterViewInit，结合 ViewChild 获取div元素，当视图初始化完成时，即可认为div已加载完毕：

组件代码：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('content') contentDiv!: ElementRef;

  ngAfterViewInit(): void {
    // 此时div已加载完成，执行目标方法
    this.onPageLoad();
  }

  onPageLoad(): void {
    console.log('content div loaded');
  }
}

模板修改（给div添加模板引用变量）：

<div #content id="content">
  <router-outlet></router-outlet>
</div>

方案2：监听路由组件激活（适合等待router-outlet内的内容加载完成） #

如果你的实际需求是等待路由组件渲染完成（而非空div加载），可以直接监听 router-outlet 的 activate 事件：

模板代码：

<div id="content">
  <router-outlet (activate)="onPageLoad($event)"></router-outlet>
</div>

组件代码：

onPageLoad(componentRef: any): void {
  console.log('路由组件加载完成', componentRef);
  // 这里执行你的业务逻辑
}

方案3：用MutationObserver监听div内容变化（适合动态更新场景） #

如果需要多次监听div内容的加载/更新（比如路由切换），可以使用浏览器原生的 MutationObserver：

组件代码：

import { Component, ElementRef, ViewChild, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  @ViewChild('content') contentDiv!: ElementRef;
  private observer!: MutationObserver;

  ngOnInit(): void {
    this.observer = new MutationObserver((mutations) => {
      // 检测到div内有子元素时，判定为加载完成
      if (this.contentDiv.nativeElement.children.length > 0) {
        this.onPageLoad();
        // 若仅需监听一次，可在此处调用 this.observer.disconnect() 停止监听
      }
    });

    // 配置监听规则：监听子元素变化及子树变化
    this.observer.observe(this.contentDiv.nativeElement, {
      childList: true,
      subtree: true
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时停止监听，避免内存泄漏
    this.observer.disconnect();
  }

  onPageLoad(): void {
    console.log('content div内容加载完成');
  }
}

模板同样需要添加 #content 引用变量。

内容的提问来源于stack exchange，提问作者Picco