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

Posted 2023-02-23

【中文标题】根据用户输入以角度 5+ 加载动态组件

【英文标题】：Loading dynamic components based on user input in angular 5+

【发布时间】：2019-07-22 13:41:50

【问题描述】：

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

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

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

【问题讨论】：

组件是动态创建的还是已经创建的？

组件已经存在，只是如何根据用户选择在屏幕上同时显示1到多个组件的问题

【参考方案1】：

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

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

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

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

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

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

【讨论】：

所以我的想法是，他们可能选择的每个表单都有一个 ID，该 ID 有一些与之关联的元数据。如果他们选择表单 D、L 和 Q，我会查找并找到 D.componentName、L.componentName 和 Q.component 名称。如果我可以说，对于 selectedComponentList 中的每个组件，显示 component.componentName，这将阻止我使用任何 if/else 逻辑。

就是使用table的思路，如果你说的组件超过100个，可以更快的查table，boolean只是一个flag，告诉你应该激活组件.通常情况下，很少有超过 100 个不同的表单组件，您应该将其划分并选择实际不同的并保持其他相同

最终状态是超过 100，所以我担心这个解决方案的可维护性。我认为在大多数情况下，每种形式试图完成的事情都会有所不同，足以保证它们自己的形式。

你应该先把它分开，看看它需要完成什么，做一个核心表单部分，只添加不同的部分