angular - 来自 json 文件的 Angular Load 组件列表

Question

我正在使用 Angular 13，我正在寻找一种通过从 json 文件中读取组件名称来加载列表或组件的方法。

例如..我有一个 json 文件，其中包含要加载到我的 app.component.html 中的组件的名称

componentListToLoad = [
  {
    "name": "Component1"
  },
  {
    "name": "Component2"
  }
]

然后在一个 for 循环中，我会加载两个组件。

app.component.html

<div *ngFor="let list of componentListToLoad">
  // Load the component list
</div>

我怎样才能在 Angular 中做到这一点？

score 0 · Accepted Answer

在 app.component.ts 文件中声明 componentListToLoad 数组

  let componentListToLoad:any = [
  {
    "name": "Component1"
   },
  {
   "name": "Component2"
   }
  ];

在 app.component.html 文件中添加以下代码

 <ng-container *ngFor="let list of componentListToLoad">
    <div>{{ list.name }}</div>
  </ng-container>

1 回答 1