将组件x或y从父组件传递到子组件并显示

Question

我想在Angular中做一些时髦的事情。

我想将两种类型的分量（x和y）从我的父级传递给我的子级分量，并在其中显示。根据状态，我可以将分量x或分量y传递给下层。

这样做的实际原因是我有一个表数据组件和一个表加载组件。我想在检索数据时显示显示正在加载的组件，而在所有数据都存在时显示在表数据组件中。

但是我希望我的子组件不要担心要显示哪个组件。

当前，我使用此布尔loading标志来确定要显示的组件是这样的：

<ui-game-table *ngIf="!loading"
               [games$]="games$">
</ui-game-table>
<app-game-table-loader *ngIf="loading"
                       [games]="loadingGames">
</app-game-table-loader>

但是我想拥有的是传递需要向下显示的组件，例如

@Input()
public gameTable: GameTableLoaderComponent | GameTableComponent;

并显示以下内容：

<gameTable></gameTable>

有人知道这样的事情是否可能吗？

Answer 1

是的，可以通过使用链接的ComponentFactoryResolver来实现，该链接用于动态创建对组件的引用并将其注入到组件模板中。

示例HERE基于单击组件中的按钮，从而将相应的组件动态加载到template元素中。