如何通过ng-template动态创建子组件并实现子向父传值（@Output优先）

当你通过ViewContainerRef.createComponent()动态创建组件时，完全可以绕过模板绑定，直接通过返回的ComponentRef实例订阅子组件的@Output事件，实现数据传递。

具体实现步骤 #

1. 修改父组件创建组件的逻辑 #

在创建子组件后，直接通过组件实例访问@Output属性并订阅：

createComponent() {
  const myChildComponentRef = this.myChildComponent;
  this.componentRef = myChildComponentRef.createComponent(ChildComponent);
  
  // 直接订阅子组件的data事件
  this.componentRef.instance.data.subscribe((responseData: any[]) => {
    // 这里写父组件处理数据的逻辑
    console.log('子组件传来的数据:', responseData);
    // 比如调用父组件的处理方法 this.processChildData(responseData)
  });
  
  this.componentRef.changeDetectorRef.detectChanges();
}

2. 清理订阅避免内存泄漏 #

如果动态组件会被频繁创建/销毁，记得在合适时机取消订阅：

import { Subscription } from 'rxjs';

// 父组件中声明订阅对象
private dataSubscription: Subscription;

createComponent() {
  // ... 原有创建组件代码
  
  this.dataSubscription = this.componentRef.instance.data.subscribe((responseData: any[]) => {
    // 处理数据
  });
}

// 组件销毁时清理资源
ngOnDestroy() {
  this.dataSubscription?.unsubscribe();
  this.componentRef?.destroy();
}

3. 子组件保持原有逻辑不变 #

你的子组件代码不需要任何修改，触发outputData()时，父组件的订阅会自动接收数据：

@Output() data = new EventEmitter<any[]>();

outputData() {
  this.data.emit(serverResponse); // serverResponse为接口返回的目标数据
}

原理说明 #

ComponentRef.instance会返回动态创建的子组件实例，你可以直接访问它的所有公共属性和方法——包括@Output装饰的EventEmitter。这种方式完全等价于模板中(data)="handleData($event)"的绑定逻辑，只是把模板层面的绑定转移到了代码层面。

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