如何在Angular组件中动态创建自定义@Output事件输出？

为简化说明，假设我们有一个MyComponent组件，它带有@Input() eventName = 'signal'属性。
我希望将signal这个值作为动态创建的EventEmitter的名称，让它可以像常规的@Output一样使用，示例用法如下：

<my-component [eventName]="'signal'" (signal)="onSignal()"></my-component>

我的实际使用场景需要处理一组“event”对象数组，除了要用作@Output名称的唯一标识外，这些对象还包含供模板使用的其他信息。

单动态事件实现方案 #

核心逻辑是监听eventName输入的变化，动态创建EventEmitter并挂载到组件实例上，Angular可以直接识别为可绑定的输出：

import { Component, Input, EventEmitter, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `<!-- 你的组件模板 -->`
})
export class MyComponent implements OnChanges, OnDestroy {
  @Input() eventName = 'signal';
  // 存储动态输出的容器，用于统一管理销毁
  private dynamicEmitters: Record<string, EventEmitter<any>> = {};

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['eventName'] && this.eventName) {
      // 销毁旧的事件实例，避免内存泄漏
      const oldName = changes['eventName'].previousValue;
      if (oldName && this.dynamicEmitters[oldName]) {
        this.dynamicEmitters[oldName].complete();
        delete this.dynamicEmitters[oldName];
        delete (this as any)[oldName];
      }
      // 创建新的事件实例并挂载到组件实例
      this.dynamicEmitters[this.eventName] = new EventEmitter<any>();
      (this as any)[this.eventName] = this.dynamicEmitters[this.eventName];
    }
  }

  // 组件内部触发事件的方法，按需调用即可
  triggerEvent(payload?: any): void {
    this.dynamicEmitters[this.eventName]?.emit(payload);
  }

  ngOnDestroy(): void {
    // 销毁所有动态事件实例
    Object.values(this.dynamicEmitters).forEach(emitter => emitter.complete());
  }
}

父组件用法和你给出的示例完全一致。

多事件对象数组实现方案 #

如果需要批量处理一组事件配置，只需要调整监听的输入为数组即可：

import { Component, Input, EventEmitter, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';

// 自定义事件配置类型，可根据业务补充其他字段
interface EventConfig {
  name: string;
  label: string;
  // 其他模板需要的属性...
}

@Component({
  selector: 'my-component',
  template: `
    <button *ngFor="let config of eventConfigs" (click)="triggerEvent(config.name)">
      {{ config.label }}
    </button>
  `
})
export class MyComponent implements OnChanges, OnDestroy {
  @Input() eventConfigs: EventConfig[] = [];
  private dynamicEmitters: Record<string, EventEmitter<any>> = {};

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['eventConfigs']) {
      // 先清空所有旧事件实例
      Object.values(this.dynamicEmitters).forEach(emitter => emitter.complete());
      this.dynamicEmitters = {};

      // 批量创建新的事件实例
      this.eventConfigs.forEach(config => {
        this.dynamicEmitters[config.name] = new EventEmitter<any>();
        (this as any)[config.name] = this.dynamicEmitters[config.name];
      });
    }
  }

  triggerEvent(eventName: string, payload?: any): void {
    this.dynamicEmitters[eventName]?.emit(payload);
  }

  ngOnDestroy(): void {
    Object.values(this.dynamicEmitters).forEach(emitter => emitter.complete());
  }
}

父组件用法示例：

<my-component 
  [eventConfigs]="[
    {name: 'signal', label: '触发信号'},
    {name: 'confirm', label: '确认操作'}
  ]"
  (signal)="onSignal()"
  (confirm)="onConfirm()"
></my-component>

兼容AOT编译的替代方案 #

以上方案在JIT编译模式下可正常运行，如果你的项目启用AOT编译且事件名无法提前枚举，可以改用触发DOM自定义事件的方式实现，无需提前声明输出：

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

@Component({
  selector: 'my-component',
  template: ``
})
export class MyComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  triggerDynamicEvent(eventName: string, payload?: any): void {
    const customEvent = new CustomEvent(eventName, { detail: payload });
    this.renderer.dispatchEvent(this.el.nativeElement, customEvent);
  }
}

父组件绑定方式和普通@Output完全一致，无使用差异。

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