Angular中addEventListener绑定回调内emit事件失效如何解决

报错本质是this指向异常：将resetWindowHeight方法作为参数直接传给window.addEventListener时，方法运行时的this会指向触发事件的window对象，而非你的Angular组件实例，因此this.onHeightChange为undefined，调用emit就会抛出报错。

方案1：使用箭头函数定义方法（最简便） #

箭头函数会继承定义时所在上下文的this，自动绑定组件实例，无需手动处理指向：

// 把方法改为箭头函数形式定义
resetWindowHeight = () => {
    const element: HTMLIFrameElement = document.getElementById('frame') as HTMLIFrameElement;
    if (element) {
       this.onHeightChange.emit();
    }
}

ngAfterViewInit() {
    window.addEventListener("resize", this.resetWindowHeight);
}

方案2：监听时用箭头函数包裹调用 #

事件触发时通过箭头函数调用组件方法，保证this指向组件：

ngAfterViewInit() {
    window.addEventListener("resize", () => this.resetWindowHeight());
}

resetWindowHeight(){
    const element: HTMLIFrameElement = document.getElementById('frame') as HTMLIFrameElement;
    if (element) {
       this.onHeightChange.emit();
    }
}

方案3：用bind手动绑定this #

通过bind方法强制将方法运行时的this绑定为当前组件实例：

ngAfterViewInit() {
    window.addEventListener("resize", this.resetWindowHeight.bind(this));
}

resetWindowHeight(){
    const element: HTMLIFrameElement = document.getElementById('frame') as HTMLIFrameElement;
    if (element) {
       this.onHeightChange.emit();
    }
}

方案4：使用Angular原生@HostListener装饰器（推荐） #

Angular提供的@HostListener可以直接监听全局事件，无需手动管理事件绑定/销毁，框架会自动处理，写法更简洁：

import { HostListener } from '@angular/core';

// 直接用装饰器监听window的resize事件，无需手动在ngAfterViewInit里绑定
@HostListener('window:resize')
resetWindowHeight(){
    const element: HTMLIFrameElement = document.getElementById('frame') as HTMLIFrameElement;
    if (element) {
       this.onHeightChange.emit();
    }
}

如果使用手动绑定事件的方案（方案1/2/3），一定要在组件销毁时移除事件监听，避免内存泄漏：

private resizeListener: EventListener;

ngAfterViewInit() {
    // 提前存储绑定后的事件回调引用，方便销毁时移除
    this.resizeListener = this.resetWindowHeight.bind(this);
    window.addEventListener("resize", this.resizeListener);
}

ngOnDestroy() {
    window.removeEventListener("resize", this.resizeListener);
}

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