在Angular（非AngularJS）中如何监听window.onload事件？

核心说明：Angular内置的生命周期钩子（如ngAfterViewInit）仅代表组件自身渲染完成，和window.onload（页面所有静态资源、图片、样式、iframe等全部加载完成的触发时机）不等效，需要单独做事件绑定。

方法1：使用@HostListener装饰器（Angular官方推荐） #

该方案符合Angular的开发规范，无需手动处理事件解绑，组件销毁时Angular会自动清理监听，避免内存泄漏。

// 根组件 app.component.ts 示例
import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 直接监听window的load事件
  @HostListener('window:load', ['$event'])
  onWindowLoad(event: Event): void {
    // 此处写加载完成后的业务逻辑
    console.log('window 所有资源加载完成', event);
  }
}

方法2：手动调用addEventListener绑定 #

适合需要灵活控制监听时机的场景，注意必须手动解绑避免内存泄漏：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    window.addEventListener('load', this.handleWindowLoad);
  }

  ngOnDestroy(): void {
    // 组件销毁时必须解绑事件
    window.removeEventListener('load', this.handleWindowLoad);
  }

  private handleWindowLoad = (event: Event): void => {
    // 业务逻辑
    console.log('window 加载完成', event);
  }
}

兼容场景：避免事件晚绑定触发失效 #

如果你的监听逻辑写在懒加载组件、延迟渲染的组件中，可能出现组件初始化时window.onload已经触发过，导致监听逻辑不执行，可以加状态判断兼容：

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

@Component({
  selector: 'app-lazy-component',
  templateUrl: './lazy.component.html'
})
export class LazyComponent implements OnInit, OnDestroy {
  private hasBindListener = false;

  ngOnInit(): void {
    // 已加载完成直接执行逻辑
    if (document.readyState === 'complete') {
      this.handleWindowLoad();
      return;
    }
    // 未加载完成再绑定监听
    window.addEventListener('load', this.handleWindowLoad);
    this.hasBindListener = true;
  }

  ngOnDestroy(): void {
    if (this.hasBindListener) {
      window.removeEventListener('load', this.handleWindowLoad);
    }
  }

  private handleWindowLoad = (): void => {
    // 业务逻辑
    console.log('执行加载后逻辑');
  }
}

注意事项 #

• 不要直接给window.onload赋值，会覆盖其他位置绑定的同事件逻辑，统一使用addEventListener添加监听
• 非根组件中绑定事件时，优先加document.readyState的判断，避免逻辑漏执行

内容的提问来源于stack exchange，提问作者code đờ