Angular组件销毁时全局对象事件监听器未移除问题

这个问题的核心原因是你在组件的constructor中直接创建了全局监听器，而Angular Universal的服务器端渲染（SSR）会执行constructor代码——虽然服务器端没有真实的window对象，但当页面刷新后客户端进行hydration（水化）时，可能会导致监听器的创建/销毁逻辑出现异常，尤其是当你没有严格限制仅在浏览器环境下创建监听器时。

另外，你当前的代码在服务器端执行renderer.listen时，虽然不会真的绑定浏览器的window事件，但可能会在客户端hydration过程中留下残留，或者导致客户端的监听器销毁逻辑失效。

解决方案1：将监听器创建移至ngOnInit并限制浏览器环境 #

把监听器的创建逻辑从constructor移到ngOnInit中，并且仅在浏览器环境下执行，这样就能避免服务器端执行不必要的代码，确保监听器只在客户端创建，并且能被正确销毁：

// list-page.component.ts
constructor(
  private renderer: Renderer2, 
  @Inject(PLATFORM_ID) private platformId: Object
) {
  // 移除constructor中的监听器创建代码
}

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    this.renderOnBrowser = true;
    // 仅在浏览器环境下创建监听器
    this.dropdownClickListener = this.renderer.listen('window', 'click', (e) => {
      if (this.dropdownOpen) {
        // 确保dropdownBtn和dropdown在浏览器环境下已初始化
        if (this.dropdownBtn?.nativeElement && this.dropdown?.nativeElement) {
          if (e.target !== this.dropdownBtn.nativeElement && e.target !== this.dropdown.nativeElement) {
            this.dropdownOpen = false;
          }
        }
      }
      console.log(1);
    });
  }
}

ngOnDestroy() {
  // 移除监听器（非浏览器环境下this.dropdownClickListener为undefined，不会执行）
  if (this.dropdownClickListener) {
    this.dropdownClickListener();
  }
  if (isPlatformBrowser(this.platformId)) {
    this.transferState.remove(STATE_KEY_LISTPAGE);
    this.transferState.remove(STATE_KEY_MAINMENU);
    this.mobileModeSubscription.unsubscribe();
    this.currentModalTabsSubscription.unsubscribe();
  }
}

解决方案2：使用原生addEventListener确保销毁可靠性 #

如果你发现Renderer2的监听在SSR场景下仍有异常，可以改用原生的window.addEventListener，这样能更直接地控制监听器的生命周期：

// list-page.component.ts
private handleWindowClick?: (e: MouseEvent) => void;

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    this.renderOnBrowser = true;
    this.handleWindowClick = (e) => {
      if (this.dropdownOpen) {
        if (this.dropdownBtn?.nativeElement && this.dropdown?.nativeElement) {
          if (e.target !== this.dropdownBtn.nativeElement && e.target !== this.dropdown.nativeElement) {
            this.dropdownOpen = false;
          }
        }
      }
      console.log(1);
    };
    window.addEventListener('click', this.handleWindowClick);
  }
}

ngOnDestroy() {
  if (isPlatformBrowser(this.platformId) && this.handleWindowClick) {
    window.removeEventListener('click', this.handleWindowClick);
  }
  // 其他清理逻辑...
}

关键注意点 #

• 避免在constructor中处理DOM/全局对象：constructor在SSR阶段会执行，此时没有浏览器环境的DOM和全局对象，容易导致逻辑异常。
• 严格判断浏览器环境：所有涉及window、document或DOM元素的操作，都要用isPlatformBrowser包裹，确保仅在客户端执行。
• 安全访问nativeElement：使用可选链操作符?.避免服务器端或组件初始化阶段访问未定义的DOM元素引用。

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