如何为Angular动态创建的组件添加@Output事件绑定？

问题场景 #

我在Angular中使用createComponent方法向div中添加动态组件：

let coolComponentRef = this.formControls?.createComponent(CoolComponent);

子组件通过@Output定义了需要传递给父组件的事件：

@Output()
propertiesEvent = new EventEmitter<Properties>();

静态组件可以直接在模板中绑定该事件：

<cool-component (propertiesEvent)="itemSelected($event)"></cool-component>

<!-- 完整静态示例 -->
<div id="formControls" #formControls>
  <cool-component (propertiesEvent)="itemSelected($event)"></cool-component>
</div>

但通过createComponent动态创建子组件时，该如何绑定propertiesEvent事件？另外我找到了相关实现思路，想知道有没有更简便的方式？

常规实现方案 #

动态创建组件后，直接通过组件实例订阅@Output对应的EventEmitter即可，代码示例如下：

// 创建动态组件实例
const coolComponentRef = this.formControls?.createComponent(CoolComponent);
if (coolComponentRef) {
  // 订阅子组件的propertiesEvent事件
  coolComponentRef.instance.propertiesEvent.subscribe((eventData: Properties) => {
    this.itemSelected(eventData);
  });
}

需要注意的是，若组件会被销毁，记得同时取消订阅以避免内存泄漏：

const coolComponentRef = this.formControls?.createComponent(CoolComponent);
if (coolComponentRef) {
  // 保存订阅对象
  const eventSubscription = coolComponentRef.instance.propertiesEvent.subscribe((eventData: Properties) => {
    this.itemSelected(eventData);
  });
  
  // 绑定组件销毁时的回调，取消订阅
  coolComponentRef.onDestroy(() => {
    eventSubscription.unsubscribe();
  });
}

简化实现思路 #

目前Angular官方没有提供比直接订阅EventEmitter更简便的语法糖，但可以封装通用工具函数来减少重复代码：

import { ComponentRef, EventEmitter, Subscription } from '@angular/core';

/**
 * 绑定动态组件的@Output事件
 * @param componentRef 动态组件实例引用
 * @param outputName 子组件@Output属性名
 * @param handler 父组件的事件处理函数
 */
function bindDynamicOutput<T>(
  componentRef: ComponentRef<T>,
  outputName: keyof T,
  handler: (...args: any[]) => void
): Subscription {
  const emitter = componentRef.instance[outputName] as EventEmitter<any>;
  return emitter.subscribe(handler);
}

使用时只需一行代码完成绑定：

const coolComponentRef = this.formControls?.createComponent(CoolComponent);
if (coolComponentRef) {
  const subscription = bindDynamicOutput(coolComponentRef, 'propertiesEvent', this.itemSelected.bind(this));
  // 组件销毁时取消订阅
  coolComponentRef.onDestroy(() => subscription.unsubscribe());
}

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