Question

我在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文件更改事件？

Answer 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;

将事件和变量添加到动态创建的组件角度4

1 个答案: