Angular 2中能否将两个不同的HostListener封装到单个函数中？

Angular的@HostListener是类装饰器，不能直接嵌套在普通函数内部使用。要实现按需启用/禁用这两个窗口卸载事件监听，可以改用Renderer2提供的手动事件绑定API，把监听逻辑封装到指定函数中，同时还能方便取消监听避免内存泄漏。

实现代码 #

import { Component, Renderer2, ElementRef, OnDestroy } from '@angular/core';
import { EventService } from './event.service'; // 替换为你的EventService实际路径

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnDestroy {
  // 保存事件订阅引用，用于后续取消监听
  private unloadListener?: () => void;
  private beforeUnloadListener?: () => void;

  constructor(
    private renderer: Renderer2,
    private elementRef: ElementRef,
    private eventService: EventService
  ) {}

  public enable(): void {
    // 绑定window:unload事件
    this.unloadListener = this.renderer.listen('window', 'unload', () => {
      this.eventService.send({ name: 'onUnload' });
    });

    // 绑定window:beforeunload事件
    this.beforeUnloadListener = this.renderer.listen('window', 'beforeunload', (event: Event) => {
      const confirmation = { message: undefined };
      this.eventService.send({ name: 'onBeforeUnload', data: confirmation });
      // 部分浏览器需设置returnValue才会触发离开确认弹窗，可根据需求调整
      // event.returnValue = confirmation.message;
    });
  }

  public disable(): void {
    // 取消事件监听
    this.unloadListener?.();
    this.beforeUnloadListener?.();
    // 清空引用
    this.unloadListener = undefined;
    this.beforeUnloadListener = undefined;
  }

  ngOnDestroy(): void {
    // 组件销毁时自动取消监听，防止内存泄漏
    this.disable();
  }
}

关键说明 #

• 用Renderer2.listen()替代@HostListener，该方法返回一个取消监听的函数，调用它就能移除对应事件绑定。
• 需要启用监听时，直接调用组件实例的enable()方法即可。
• 新增disable()方法用于手动取消监听，同时在组件销毁钩子ngOnDestroy中自动调用，避免内存泄漏。
• 针对beforeunload事件，部分浏览器需要设置event.returnValue才能触发默认的离开确认弹窗，可根据业务需求调整。

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