Question

我有以下代码。当 ngOnInit（） 运行时， this.widget 包含正确的组件和 this。数据 包含适当的数据。

我无法弄清楚如何将动态组件平滑地插入到模板中，因此结果将与 < / em> ，其中 DynamicComponent 是 this.widget 中引用的组件。

我尝试了一些在线示例，但无法使其正常工作。有人可以帮忙吗？

24+24

Answer 1

尝试下面的代码以查看是否有效

<template #dynamicContainer></template>

在您的组件中

@ViewChild("dynamicContainer", { read: ViewContainerRef }) container: ViewContainerRef;
componentRef: ComponentRef<DynamicComponent>;
constructor(private resolver: ComponentFactoryResolver) {}

createComponent(type) {
    //Clear the container.
    this.container.clear();
    //Create a factory for component.
    const factory = this.resolver.resolveComponentFactory(DynamicComponent);
    //Create a component using the factory
    this.componentRef = this.container.createComponent(factory);
    //Pass the value for @Input properties using a component reference instance method.
    this.componentRef.instance.data = this.data;
}

在您的模块中，确保将组件添加到entryComponents数组中

entryComponents: [GaugeComponent]

Angular 7将动态组件注入模板

1 个答案: