根据用户输入以角度 5+ 加载动态组件

Question

我有一个应用程序，用户在一个页面上做出决定（我正在使用 cdk stepper），当他们进入下一页时，我想根据用户选择的内容动态加载不同的组件。

将选项视为不同的表单组件，下一页将根据这些选项显示其中的一个到多个。我不想只在 html 中使用 ngIf，因为这些表单可能有 100 多个，所以我希望用户所做的每个选择都有一个与之关联的变量（元数据），它可用于动态加载任何数字下一个屏幕上的组件。

我为此查看了 CDK Portal，但我想知道是否有更好的解决方案。如果没有，我不能 100% 确定 CDK Portal 如何为此工作，我认为每个表单都必须扩展一些基本组件。我相信打字稿将被设置为将组件加载到门户主机中。如果有人对此有任何建议或问题，请告诉我。

Answer 1

基本上，您仍然需要将 if/else 逻辑放在其他地方以使其工作。我解决这个问题的第一种方法是制作一个包含两列的选择组件表，组件名称和一个布尔值以知道它已被选中：

[(A, false), (B, false)]

您仍然需要将下一步的每个组件放入 HTML 文件中，如下所示：

<a *ngIf="isComponentSelection(a)"></a>
<b *ngIf="isComponentSelection(b)"></b>

isComponentSelection里面的逻辑是知道这个组件是否应该显示，它会根据我们上面做的表格来检查。

在第一个板中，您只需将具有您拥有的组件名称的复选框列表绑定到表格中。