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

Question

我有一个网格组件和一个动态确定的第二个组件。

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

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

Answer 1

您可以使用[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