将事件和变量添加到动态创建的组件 Angular 4答案

【问题标题】：Add Events and Variable to Dynamically created Component Angular 4将事件和变量添加到动态创建的组件 Angular 4
【发布时间】：2017-07-11 02:06:24
【问题描述】：

我在我的 Angular 应用程序中有一个动态创建的组件，如下所示：

const factory = this.resolver.resolveComponentFactory<IMessage>(MessageComponent);
this.component = this.container.createComponent(factory);
this.component.instance.body = message;

相当于在组件的HTML中添加<message [body]="message"></message>。

假设，我想在我的动态组件代码中实现这样的功能：

<message [body]="message" #form="my-form" (change)="myFunction()"></message>

如何通过组件的 ts 文件绑定这些额外的变量和更改事件？

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

输入绑定和事件输出不能自动与动态创建的组件一起使用。这是因为编译器创建了侦听子组件事件的函数以及根据它解析的模板更新子组件绑定的函数。模板中未指定动态组件，因此编译器不会创建此类函数。您可以在此处阅读有关这些功能的信息 - The mechanics of property bindings update in Angular。函数名称为updateDirectives。

您必须手动更新属性并订阅事件：

this.component.instance.body = message;
this.component.instance.change.subscribe();

这意味着子组件不能使用 ngOnChanges 生命周期钩子，因为它永远不会被 Angular 触发。

此外，像#form 这样的查询列表绑定也不能正常工作。您可以访问的只是组件的实例。因此，无论将自己导出为my-form 的指令都应该注入一个主机MessageComponent 并将与my-form 关联的数据附加到组件实例。然后父组件将能够访问它：

this.component.instance.formData;

【讨论】：

我在实例上找不到更改属性，如您在“this.component.instance.change.subscribe();”这一行中所示的那样
@WASIF，这可能是因为在您的自定义组件类中，事件发射器属性具有不同的名称
好吧，我的孩子有这个事件“@Output() clickToRemove = new EventEmitter();”我只能将其称为“instance.clickToRemove”，但不能订阅。 VS Code 在 subscribe() 方法调用时给出编译错误。使用 Angular 5。请帮助我解决这个问题。
@WASIF，您可以单独创建一个问题并在此处发布链接吗？
我希望我可以发布一个问题，但我现在被禁止了。如果有人对我的问题给予 2-3 票赞成，那么我就可以提出问题。