从 JSON (API) 加载 Angular 动态组件答案

【问题标题】：Angular Dynamic Component Loading from JSON (API)从 JSON (API) 加载 Angular 动态组件
【发布时间】：2021-06-09 13:51:45
【问题描述】：

我正在尝试从 API 调用的响应中动态加载组件。

假设我有 3 个组件/小部件 A、B 和 C。根据 API 调用的响应，我必须以任意顺序加载 A、B、C 或它们的任意组合（例如将它们加载到C的顺序，然后是B）。有点像客户端的 CMS。

我想到的一种解决方案是使用从 API 获取带有组件 ID 的 HTML 代码并使用 [innerHtml]。

是否有任何替代解决方案可以让我从 API 获取小部件/组件列表，并在 Angular 中动态加载它们？

【问题讨论】：

【解决方案1】：

我想到的是使用从 API 和使用 [innerHtml]

为什么不使用内容投影而不是创建多个组件。创建一个组件并在子组件中使用ng-content 传递html。您可以查看here了解更多详情。

在这里我可以得到一个列表的任何替代解决方案来自 API 的小部件/组件，并在 Angular 中动态加载它们？

您可以使用 Angular 中的 ComponentFactoryResolver 来帮助您完成它。您需要获取viewContainerRef 并使用ComponentFactoryResolver 动态创建一个组件并注入它。

This 是一个很好的参考，您可以参考。

【讨论】：

【解决方案2】：

有一个概念叫做“ComponentFactoryResolver”。希望这对您的案件有所帮助。

【讨论】：