按名称从 api 动态添加组件到 Angular 中的页面 2

Question

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

我在网上和 plunkr 上看到了几个使用 ComponentFactoryResolver 将组件动态添加到 angular 页面的示例，但它需要在parent class，但就我而言，我不能这样做。大多数示例需要对子组件名称进行硬编码。有什么方法可以引用以前动态添加的组件，并通过 Angular 2 中的 api 收到的名称添加新组件？我不确定这是否现实。

Answer 1

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

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

所以，简短的回答：

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

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