使用参数动态创建组件

Question

我有一个使用 ComponentFactoryResolver 动态创建的组件

this.container.clear();
let factory  = this.resolver.resolveComponentFactory(DynamicComponent);
this.componentRef = this.container.createComponent(factory);

template: '...<child-component [param1]="param1"></child-component>...';

问题是 DynamicComponent 的模板有子组件和输入绑定。有没有办法在动态创建组件时将参数传递给子组件？

Answer 1

是的，实现它的最简单方法是：

this.componentRef.instance.param1 = param1;

但要注意，这种解决方案很容易出错。如果param1随时间变化，可以得到

异常：表达式在检查后发生了变化。

这不容易调试。

您可能想要使用依赖项注入解决方案，如本教程中所述。

Answer 2

是这样的：

 const factory = this.componentFactoryResolver.resolveComponentFactory(LoginComponent);
    const component: ComponentRef<LoginComponent> = this.viewContainerRef.createComponent(factory);
    component.instance.user = "prop 1";
    component.instance.input2 = "prop 2";