【发布时间】：2018-05-30 09:29:30
【问题描述】：
在我的应用程序中，我有仪表板组件。在仪表板组件 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>
但我不确定这是不是最好的方法，而且我不知道如何以另一种方式实现这一目标并具有良好的性能。
【问题讨论】：
-
Dynamic components 就是为此而生的。 RTFM !
-
使用动态组件加载并不总是最好的方法，在特定情况下它根本不起作用。例如必须将指令应用于组件。在你的情况下，我会使用 *ngIf 或 *ngSwitch。
-
正是@Chrillewoodz，我已经看到了动态组件，但我不相信它在我的场景中运行良好。此外，ngIf/ngSwitch 可以工作，但就实践和性能而言，这是最好的方法吗？
-
@ImadElHitti Ye，使用它完全没问题。我也在使用它，我的场景比你的要大得多，相信我。我有大量的配置，可能是无穷无尽的，所以我基于这个解决方案递归地渲染组件。我什至不得不从动态组件方式切换，因为它不允许我做我需要的事情。
-
好的先生，谢谢。
标签： angular components