Angular 5基于配置显示组件的最佳方式

Question

在我的应用程序中，我有仪表板组件。在仪表板组件OnInit中，我调用一个服务，该服务返回一个包含3个可能用例的配置。

基本上答案是这样的：

{
  "usecase": "usecase1" // "usecase2" or "usecase3"
}

对于每个用例，整个仪表板内容将不相同。

每个用例我有3个组件：useCase1Component，useCase2Component，useCase3Component

我想知道基于用例显示/呈现正确组件的最佳方法。

我可以在dashboardComponent html中使用* ngIf这样做：

<useCase1Component *ngIf="showUseCase1"></useCase1Component>
<useCase2Component *ngIf="showUseCase2"></useCase2Component>
<useCase3Component *ngIf="showUseCase3"></useCase3Component>

但我不确定这是最好的方式，我不知道如何以良好的表现以另一种方式实现这一目标。

Answer 1

您可以使用* ngIf。这是显示或隐藏项目的Angulars方式。性能非常好，您无需担心它。