在Angular中以编程方式添加/删除组件动画

Question

我是Angular的新手，并且无法真正找到任何有关此问题的良好答案。

在组件中，我有几个按钮和一个列表（'li'）。 单击按钮时，应该创建另一个组件的实例并将其添加到列表中。不同的按钮应该添加不同的组件。

我已经成功设法通过componentFactoryResolver添加新实例，但很难创建或移除它们。

什么是“正确”的方式（如Angular团队打算的那样）动态添加和删除组件并对其进行动画处理？

Answer 1

您要找的是使用Router进行导航。 我创建了一个plunker这里：https://embed.plnkr.co/sukXA2zRV7kEAq4MZDXY/

当你点击一个，被创建并添加到DOM，当你点击B，A的实例消失并创建组件B的一个实例成分A的一个实例。

HostComponent是它具有定义的子路由的组件。请注意，在组件中，你实际上并没有引用任何这些“子”组件。父子路由关系在app-routing.module.ts内部定义。

我建议抽出时间来读取启动路由器引导来完成，因为这是在角2开发的一个重要方面： https://angular.io/docs/ts/latest/guide/router.html

祝你好运！

编辑为ComponentA和更新的plunker链接添加路线动画。