Angular：抽象基类中@HostListener('window:onunload')无法触发问题

问题原因 #

Angular的装饰器（包括@HostListener）不支持继承传递。当你在抽象父类WindowUnloadComponent中定义@HostListener('window:onunload')时，Angular在解析子类MyComponent的组件元数据时，不会读取父类中的装饰器配置，因此事件绑定不会生效。而将@HostListener移到子类中时，Angular能直接识别并完成事件绑定，所以代码可以正常执行。

解决方案 #

方案1：手动在子类中添加@HostListener并调用父类方法 #

在子类中添加@HostListener，显式调用父类的事件处理逻辑：

@Component({
    selector: 'my-comp',    
})
export class MyComponent extends WindowUnloadComponent {
    @HostListener('window:onunload', ['$event'])
    public onUnload($event: Event) {
        super.onUnload($event);
    }

    public onWindowUnloadAction() {
        // some code
    }
}

方案2：在抽象类中通过代码手动绑定事件（推荐） #

利用Angular生命周期钩子，在抽象类中手动添加/移除事件监听，避免依赖装饰器的继承：

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

@Component({ template: '' })
export abstract class WindowUnloadComponent implements OnInit, OnDestroy {    
    private unloadHandler: (event: Event) => void;

    ngOnInit(): void {
        // 绑定事件时确保this指向当前组件实例
        this.unloadHandler = (event) => this.onUnload(event);
        window.addEventListener('unload', this.unloadHandler);
    }

    ngOnDestroy(): void {
        // 必须移除监听，防止内存泄漏
        window.removeEventListener('unload', this.unloadHandler);
    }

    private onUnload($event: Event) {        
        this.onWindowUnloadAction();
    }
    
    public abstract onWindowUnloadAction(): void;
}

子类无需额外修改，只要实现onWindowUnloadAction方法即可：

@Component({
    selector: 'my-comp',    
})
export class MyComponent extends WindowUnloadComponent {
    public onWindowUnloadAction() {
        // some code
    }
}

方案3：使用服务封装全局unload事件 #

创建一个全局服务来管理window:unload事件，让需要监听的组件订阅服务的事件流，这种方式更灵活，适合多个组件需要监听的场景。

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