角度6中動態零件或路線的行駛方式

Question

我們有一個Angular 6企業應用程序，該產品已為產品實現了CRUD。 我們有以下路線：

{ path: 'modules/products', component: ProductsComponent, data: { permission: 'Pages.Products' }  },
{ path: 'modules/products/view-product', component: ViewProductComponent, data: { permission: 'Pages.Products' } },
{ path: 'modules/products/create-or-edit-product', component: CreateOrEditProductComponent, data: { permission: 'Pages.Products.Edit' } },

現在，從產品頁面中，我們想創建一個帶有“添加新單元”選擇選項的“單元”選擇框組件。 選擇此選項時，我們希望將用戶路由到創建單位路徑，而又不會丟失他尚未在產品視圖中保存的更改。

面包屑看起來像這樣：

主頁>產品>編輯Prod01>新建單元

我們正在尋找實現這一目標的最佳實踐。 我們謹記以下做法：

1.使用動態子路由

通過單元選擇框組件的onInit（）函數動態添加子路徑。 當選擇“添加新單位”選項時，我們使用數據服務將當前產品數據（組件狀態？）保存在onDestroy（）函數中。 創建新單位后，我們重定向回產品頁面並加載未保存的產品數據。

2.使用隱藏/顯示多個組件

在產品頁面上選擇“添加單位”選項時，我們會在頁面上動態添加“添加單位”組件，並在隱藏產品組件的同時進行顯示。 創建新單位后，我們將隱藏/刪除“添加單位”組件並顯示產品組件。

誰能指出我們正確的方向？ 所有幫助/評論表示贊賞。

Answer 1

在我看來，第二種選擇更好，更自然 。 第一種選擇涉及更多的開銷，如果在更多的組件中使用它，可能會臭名昭著。 也有較高的機會忘記某些東西，從而使此選項更容易出錯。

但是，除了您提供的選項之外，為什么不利用Angular的Router提供的功能（可能適合您的用例）呢？ 看一下輔助路線 。 使用此解決方案，您不必明確關心動態組件管理，而可以將其傳遞給Angular的Router，后者將以干凈安全的方式進行處理。