使用参数动态创建组件

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的模板有子组件和输入绑定。是否有办法在动态创建组件时向子组件传递参数？

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

- Balaji Perumal

---

你能找到这个问题的答案吗？ - Phalgun

Answer 1

是的，最简单的方法是：

this.componentRef.instance.param1 = param1;

但要注意，这种解决方法容易出错。如果param1随着时间的推移发生更改，您可能会得到以下错误：

EXCEPTION: Expression has changed after it was checked.

这个错误信息不容易调试。

您可以使用依赖注入的解决方案，如此 教程中所解释的那样。

- Christian Vincenzo Traina

---

已经尝试过这个方法，但是出现了“表达式在检查后已更改”的错误。 - Balaji Perumal

你有跟着我提供的依赖注入教程吗？ - Christian Vincenzo Traina

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

- David Anthony Acosta

---

已经尝试过这个方法，但是出现了“表达式在检查后已更改”的错误。 - Balaji Perumal

尝试添加这个构造函数(private cd: ChangeDetectorRef){}，然后在分配值之后使用this.cd.detectChanges(); - David Anthony Acosta

什么是 this.viewContainerRef？ - Nehal Jaisalmeria

@Nehal Jaisalmeria this.viewContainerRef 来自于在模板中有类似 <ng-template #viewContainerRef></ng-template> 的东西，这是组件可以动态管理的地方，然后在组件代码中以类似 @ViewChild("viewContainerRef", { read: ViewContainerRef }) viewContainerRef: ViewContainerRef; 的方式进行获取。 - John Churchill