子动态创建的组件与父组件之间的Angular4通信

Posted

技术标签:

【中文标题】子动态创建的组件与父组件之间的Angular4通信【英文标题】:Angular4 communication between child dynamically created component to parent 【发布时间】:2018-01-15 03:04:33 【问题描述】:

我有一个 Angular4 组件,只要用户按下加号按钮,它就会动态创建许多子组件。子组件有一个输入选择,必须在选项选择后向父组件发送信息。

ComponentFactoryResolver 正在创建子组件,如下所示

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
let viewContainerRef = this.anchor.viewContainerRef;
viewContainerRef.createComponent(componentFactory);

子组件有一个使用 EventEmitter 的输出,但是当应用程序运行时没有任何反应。

我尝试过不使用动态创建并且工作正常。

我搜索了很多示例,但没有一个考虑 angular4 或父级与动态创建的子级之间的通信。

【问题讨论】:

您能否为您的问题创建一个 plunker 示例。找到解决方案会很有帮助 【参考方案1】:

试试这个:

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
let viewContainerRef = this.anchor.viewContainerRef;

const dynamicComponentInstance = viewContainerRef.createComponent(componentFactory).instance;
dynamicComponentInstance['childEventEmitter'].subscribe((eventEmitter) => 
  console.log(eventEmitter)
);

childEventEmitter 是您从子组件发出的变量名。

【讨论】:

以上是关于子动态创建的组件与父组件之间的Angular4通信的主要内容,如果未能解决你的问题,请参考以下文章

vue子组件与父组件通信

Vue定义子组件与父组件通信数据并渲染(父向子通信和子向父通信)

React组件间通信(常用方式,简单易用)

25组件之间的通信(练习)

小程序组件之间的通信

Vue父子组件及非父子组件如何通信