Angular 从 json 文件加载组件列表

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 中执行此操作？

Answer 1

在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>

Angular Load component list from json file