如何在Angular 12应用中使用JavaScript的dispatchEvent发送无额外数据的自定义事件

一、事件触发端修正代码 #

CustomEvent的第二个参数要求为配置对象，你需要将字符串放在该对象的detail属性中传递，无需额外其他配置即可满足需求：

document.element.dispatchEvent(new CustomEvent('myCustomEvent', {
  detail: 'The string that I try to send when fire event from code'
}));

如果需要事件向上冒泡到父级元素，可以额外添加bubbles: true配置，不需要则可以省略，默认值为false。

二、Angular 端接收事件的实现 #

方式1：使用 @HostListener 全局监听（最简单） #

直接在组件类中添加装饰器监听全局的自定义事件即可：

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

@Component({
  // 你的组件原有配置
})
export class YourComponent {
  @HostListener('document:myCustomEvent', ['$event'])
  handleCustomEvent(event: CustomEvent<string>) {
    // 此处即可获取到传递的字符串
    const targetStr = event.detail;
    // 后续业务逻辑
    console.log('接收到的标识字符串：', targetStr);
  }
}

方式2：监听指定DOM元素的事件 #

如果事件是绑定在特定元素而非全局document上，可以通过ViewChild获取元素实例后绑定监听：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  template: `<div #targetEl>触发事件的目标元素</div>`
})
export class YourComponent implements AfterViewInit {
  @ViewChild('targetEl') targetEl: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    this.targetEl.nativeElement.addEventListener('myCustomEvent', (event: CustomEvent<string>) => {
      const targetStr = event.detail;
      // 后续业务逻辑
    });
  }
}

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