如何在Angular2 +中基于运行时约束动态显示不同的组件类型？

-1

有一个分离器组件总是在顶部包含一个网格。次要组件将显示在分离器的底部。辅助组件的类型将取决于网格中选定的行类型。选择第1行，次要组件可能是折线图选择第2行，次要组件可能是另一个网格... 随着用户更改所选行，显示的组件和数据将需要更新。

关于如何设置它的任何想法？

2017-08-14 reza

为什么你不能简单地使用'* ngIf' /'[ngSwitch]'指令呢？ –

您可以使用[ngSwitch]指令动态加载第二个组件。

如果要动态加载它们，建立与此类似

<div [ngSwitch]="variable"> 
    <app-first *ngSwitchCase="1"></app-first> 
    <app-second *ngSwitchCase="2"></app-second> 
</div>

这是给你，你将如何确定应加载哪个组件代码。例如，您可以使用纯JavaScript的jQuery更改变量的值以呈现特定组件。如果更改行，组件将自动更新。

如果你想的那么从第一个组件的数据匹配第二自动更新内容，你必须使用由Angular4提供了一些跨组件通信。好解释如何在这里做到这一点：https://www.youtube.com/watch?v=I317BhehZKM

2017-08-14 17:46:17

ngSwitch优于ComponentFactoryResolver的优点是什么？ – reza

从我所知道的使用ComponentFactoryResolver是更好的方法，因为它更面向对象，更容易测试和扩展，但是有一些缺点需要处理。我对ComponentFactoryResolver没有多少经验，但是从我的经验来看，ngSwitch对于那些你不需要扩展你的项目的中小型项目是很好的。 –

回答