angular 2+ 使用 createComponent 工厂时如何使用和监听输出发射器

Posted 2023-02-23

【中文标题】angular 2+ 使用 createComponent 工厂时如何使用和监听输出发射器

【英文标题】：angular 2+ how to use and listen output emiter when use createComponent factory

【发布时间】：2020-04-27 22:08:39

【问题描述】：

我在 ParentComp 中动态创建组件：

const factory = this.resolver.resolveComponentFactory<ChildComp>(component);
this.componentRef = this.container.createComponent(factory);
this.componentRef.instance.dataConfig = dataTab.dataConfig;

现在需要从这个 ChildComp 发出一些结果并从 ParentComp 监听这个 @output。

我怎样才能得到这些数据？

【参考方案1】：

这可以很容易地实现，如下所示

在子组件中

 @Output() close = new EventEmitter<any>();

  emitEventMethodInChild() 
    this.close.emit('close')
  

在父组件中

this.componentRef.instance.close.subscribe(response => 
    console.log('response from child to parent',response);
   // Here you can receive data output form child to parent component

在这里，在上面的示例中，我将 close 作为事件发射器。

希望对你有帮助！