在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鏈接添加路線動畫。