javascript - 如何根据对象的属性加载动态组件？

Question

我正在尝试构建一个可能包含不同组件的卡片列表；因此，例如我有以下对象数组:

{
   title: 'Title',
   descrption: 'Description',
   template: 'table',
},
{
  title: 'Title',
  descrption: 'Description',
  template: 'chart',
}

我得到这个数组作为服务的响应，然后我需要根据 template 属性将每个对象匹配到一个组件，例如，第一个项目应该匹配TableComponent 和 ChartComponent 的第二个；

我正在尝试关注关于 Dynamic Component Loading 的 Angular 文档，但我不确定如何告诉该方法如何将数组中的每个对象与特定组件匹配。

在我的父组件中，我创建了一个 anchor ，组件应在其中加载指令:

<ng-template appCheckpointHost></ng-template>

我正在尝试使用示例中显示的 ComponentFactoryResolver。

loadComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChartCheckpointComponent);
    const viewContainerRef = this.checkHost.viewContainerRef;
  }

该示例展示了“服务”每三秒运行一次的场景，随机获取一个项目并显示；但我想做的是在加载父组件时获取所有项目，并使用其各自的组件呈现每个项目。

有什么想法可以让它发挥作用吗？

Answer 1

你可以像这样创建一个字典:

const nameToComponentMap = {
  table: TableComponent,
  chart: ChartComponent 
};

然后只需使用此字典来确定应根据项目数组中特定 item 的 template 属性呈现哪个组件:

const componentTypeToRender = nameToComponentMap[item.template];
this.componentFactoryResolver.resolveComponentFactory(componentTypeToRender);