Angular中EventEmitter在事件触发前从已定义变为未定义的问题

问题描述 #

我尝试在Angular子组件中通过EventEmitter向父组件传递数据，已按规范导入Output和EventEmitter并完成配置，代码如下：

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

@Component({
  selector: 'app-map',
  standalone: true,
  imports: [],
  templateUrl: '../../assets/map-image.svg',
  styleUrl: './map.component.css'
})

export class MapComponent implements OnInit {
  map: any;
  @Output() selectedCountryEvent = new EventEmitter<string>();
  
  onClick(event: any) {
    console.log("Inside onClick: ");
    console.log(this.selectedCountryEvent);
    this.selectedCountryEvent.emit("hello click");
  }

  ngOnInit(): void {
    this.map = document.getElementsByTagName("svg");
    addEventListener("click", this.onClick);

    console.log("Inside ngOnInit: ");
    this.selectedCountryEvent.emit("hello world")
  }
}

该组件以SVG地图为模板，期望用户点击时将数据传递给父组件，但运行时出现以下问题：

• ngOnInit函数中，selectedCountryEvent能成功向父组件发送事件；
• 点击事件触发时，onClick函数执行，但this.selectedCountryEvent为undefined，导致emit操作失败。

原因分析 #

核心问题是函数执行时的this指向错误：

• 在ngOnInit中，this指向的是MapComponent的组件实例，因此能正常访问到selectedCountryEvent属性；
• 当通过原生addEventListener绑定onClick函数时，点击事件触发时，this会指向触发事件的DOM元素（即SVG节点），而非组件实例，所以this.selectedCountryEvent自然是undefined。

解决办法 #

提供三种可行的修复方案：

方案1：使用箭头函数绑定组件上下文 #

修改事件绑定的方式，用箭头函数包裹，确保this始终指向组件实例：

ngOnInit(): void {
  this.map = document.getElementsByTagName("svg");
  addEventListener("click", (event) => this.onClick(event));

  console.log("Inside ngOnInit: ");
  this.selectedCountryEvent.emit("hello world")
}

方案2：用bind强制绑定this #

给onClick函数显式绑定组件实例的this：

ngOnInit(): void {
  this.map = document.getElementsByTagName("svg");
  addEventListener("click", this.onClick.bind(this));

  console.log("Inside ngOnInit: ");
  this.selectedCountryEvent.emit("hello world")
}

方案3：使用Angular模板事件绑定（推荐） #

既然组件的模板是SVG文件，直接在SVG的根元素上添加Angular风格的点击事件绑定，Angular会自动处理this指向问题，同时更符合Angular的开发规范：

<!-- 在你的map-image.svg根元素上添加 -->
<svg ... (click)="onClick($event)">
  <!-- 其他SVG内容 -->
</svg>

然后修改组件的ngOnInit，移除原生的事件绑定代码：

ngOnInit(): void {
  console.log("Inside ngOnInit: ");
  this.selectedCountryEvent.emit("hello world")
}

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