Question

我需要多次加载一个动态组件，并根据某个值动态传递数据，以便它可以与运行时数据一起加载。

我尝试了以下示例 https://dzone.com/articles/how-to-dynamically-create-a-component-in-angular

作为示例，我们有一个具有“ message”属性的messageComponent和在hostComponent中，我们在html文件中添加了一个模板，例如

<div style="text-align:center">
     <h1>
         Welcome to {{ title }}!
     </h1>
     <template #messagecontainer>
     </template>
 </div>

因此在这里，模板组件将替换我们的messageComponent。

我需要类似的东西，我们可以多次迭代此模板并通过 messageComponent中动态地设置不同的“ message”值。

Answer 1

这是我的方法：

在模板中，为所有消息创建一个容器

<ng-container #messageContainer></ng-container>

添加一个允许我们创建组件并将其插入视图的功能

private createComponent (compClass) {
   const compFactory = this.cfr.resolveComponentFactory(compClass);

   return this.messageContainer.createComponent(compFactory);;
 }

根据传入数据多次加载组件；我们还将跟踪已加载的组件，以便在我们需要加载另一个动态组件时能够销毁它们。

 private loadNewComponentList () {
   this.messages.forEach((msg, idx) => {
     this.destroyCompFromList(this.componentList[idx]);

     const comp = this.createComponent(componentMap[this._crtComp]);

     (comp.instance as any).message = msg;

     comp.changeDetectorRef.detectChanges();

     this.componentList[idx] = comp;
   });
 }

Here is a StackBlitz demo。

使用不同的数据多次加载动态组件

1 个答案: