Angular 2+中如何实现动态派发指定类型的通用自定义事件？

实现方案说明 #

Angular 的@Output装饰器不支持运行时动态修改绑定的事件名，下面提供两种可行的实现方案：

方案1：基于原生DOM自定义事件实现（最贴合需求） #

不需要提前声明固定的@Output，运行时可根据传入的eventType派发对应名称的事件，父组件可以直接绑定对应事件名使用，和原生组件体验一致，适合通用组件库场景。

子组件（自定义按钮）代码 #

import { Component, Input, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-custom-button',
  template: `<button (click)="handleClick($event)"><ng-content></ng-content></button>`
})
export class CustomButtonComponent {
  // 入参：自定义事件类型
  @Input() eventType: string = 'buttonClicked';

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

  handleClick(originEvent: Event): void {
    // 生成自定义事件，原始点击事件存在detail字段中传递
    const customEvent = new CustomEvent(this.eventType, {
      detail: originEvent,
      bubbles: false, // 可按需配置是否允许事件冒泡
      cancelable: true // 可按需配置是否允许取消事件
    });
    // 派发事件
    this.renderer.dispatchEvent(this.elementRef.nativeElement, customEvent);
  }
}

父组件使用示例 #

<!-- 传入eventType为save，监听save事件即可 -->
<app-custom-button eventType="save" (save)="handleSave($event.detail)">
  保存
</app-custom-button>

<!-- 传入eventType为delete，监听delete事件即可 -->
<app-custom-button eventType="delete" (delete)="handleDelete($event.detail)">
  删除
</app-custom-button>

方案2：固定事件+携带类型标识（适合内部业务场景） #

如果父组件可以统一收口处理所有按钮事件，仅需通过类型区分逻辑，用这种方案实现更简单。

子组件代码 #

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

@Component({
  selector: 'app-custom-button',
  template: `<button (click)="handleClick($event)"><ng-content></ng-content></button>`
})
export class CustomButtonComponent {
  @Input() eventType: string = 'buttonClicked';
  // 固定的输出事件，携带事件类型和原始点击事件
  @Output() buttonAction = new EventEmitter<{type: string, event: Event}>();

  handleClick(originEvent: Event): void {
    this.buttonAction.emit({
      type: this.eventType,
      event: originEvent
    });
  }
}

父组件使用示例 #

<app-custom-button eventType="save" (buttonAction)="handleButtonAction($event)">
  保存
</app-custom-button>

handleButtonAction(action: {type: string, event: Event}): void {
  switch(action.type) {
    case 'save':
      // 执行保存逻辑
      break;
    case 'delete':
      // 执行删除逻辑
      break;
  }
}

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