在Angular 2中按名称从api动态ddd组件到页面

Question

我是 Angular 初学者，并且有一个项目可以使用从 Web api 返回的组件名称，根据某些规则在页面上动态添加组件。基本上，用户可以单击一个按钮来添加新的组件 A、B、C、D 等。然后我必须检查他们是否可以根据先前添加的组件添加该组件，然后添加该组件。由于组件是未知的，我们在数据库中定义了名称，但我在 Angular 2 中看到了许多不同且有些令人困惑的方法。

我在网上和 plunkr 看到了几个使用 ComponentFactoryResolver 将组件动态添加到角度页面的示例，但它需要在父类中预定义子组件，但在我的情况下我不能去做。大多数示例都需要对子组件名称进行硬编码。有什么方法可以引用以前动态添加的组件，并通过 Angular 2 中的 api 接收的名称添加新组件？我不确定这是否现实。

Answer 1

您实际上可以知道之前创建的组件是什么，只要您引用了创建它的ViewContainerRef。您还可以创建一个服务来存储创建的组件的名称，并将您的逻辑基于该引用，因此这部分没什么大不了的。

然而，你必须以某种方式告诉 Angular，有些组件没有在你的标记中声明，它们将在运行时创建，这就是为什么你必须将这些组件 classes 传递给 @987654324 @ 要实例化动态组件的组件的属性。如果你不这样做，Angular 只会抛弃它们，并且不会意识到它们确实存在。

所以，简短的回答：

1. 是的，可以根据与之前创建的组件相关的自定义逻辑动态创建组件。
2. 是的，可以根据 API 调用中收到的名称创建组件，但是，这些组件必须事先在 Angular 应用程序中定义，并且您必须将它们作为 entryComponents 传递给实例化它们的组件。
3. 怎么做？看看this answer，基本上是抽象了创建动态组件的逻辑，所以只需要传递组件名和props即可。

如果您在第一点上需要帮助，请尝试设置一个快速示例，我可以提供帮助。