Angular动态组件场景下如何实现子组件向父组件传值

实现步骤 #

• 第一步：给子组件定义输出事件
  在HeroProfileComponent中导入@Output和EventEmitter，声明自定义输出事件，在按钮点击回调中触发事件抛出数据：

// 子组件类内部代码
import { Output, EventEmitter } from '@angular/core';

@Output() heroSelect = new EventEmitter<{id: number, name: string}>();

// 按钮点击触发函数
onBtnClick() {
  this.heroSelect.emit({id: this.hero.id, name: this.hero.name});
}

• 第二步：父组件加载动态组件时订阅事件
  在AdBannerComponent的动态组件创建逻辑中，通过componentRef.instance获取子组件实例，订阅其输出事件，同时要注意在组件销毁时取消订阅避免内存泄漏：

// 父组件动态创建组件的逻辑处
const componentRef = this.viewContainerRef.createComponent<HeroProfileComponent>(HeroProfileComponent);
// 订阅子组件输出事件
const sub = componentRef.instance.heroSelect.subscribe(data => {
  // 此处编写父组件接收数据后的处理逻辑
  console.log('接收到子组件传递的数据：', data);
});
// 把订阅对象存入组件实例的subscriptions数组，在ngOnDestroy生命周期中统一取消订阅
this.subscriptions.push(sub);

该设计是否属于反模式 #

该实现不属于反模式，是Angular框架官方推荐的动态组件通信标准方案：

动态加载的组件无法通过模板语法绑定事件，直接订阅子组件@Output对应的EventEmitter完全符合Angular单向数据流设计原则，子组件仅负责事件通知，父组件负责业务逻辑处理，没有违背框架设计规范，只要做好订阅销毁避免内存泄漏即可在生产环境正常使用。

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