使用Angular的路線集合來填充導航區域

Question

在Angular 2中開發應用程序時，當涉及到路線時，我發現自己的應用程序中存在冗餘代碼。一旦我從路由器模塊使用的文件中導出路由，我會將其想象成單一的真實來源 - 重新用於填充應用中的導航區域。

問題是，Route interface項目不允許任何種類的'標籤'屬性。如果是這樣，我可以遍歷數組，獲取指定的級別（root或children或任何路由），如果路徑不是''或**，我會返回該項目並使用它的label。

現在，正如它的意思一樣，我只是想描述問題。有沒有人爲此達成一個偷偷摸摸的解決方案？

有那麼一刻我以爲克隆途徑收集和對每個項目的頂部將我自己的標籤，但它會再次產生一些不必要的代碼，在另一端

Answer 1

的路由在角度應用都只是一個對象數組。換句話說，他們是一個JavaScript變量。你如何獲得這個變量取決於你。

你可以有一個allRoutes變量充當真理的唯一來源：

// Note that I haven't used the `Routes` type. 
// You could define your own interface for this. 
const allRoutes: any[] = [ 
    { path: 'home', component: HomeComponent, label: 'Home' }, 
    { path: 'contact', component: ContactComponent, label: 'Contact' }, 
    // ... 
}; 

然後，用它來生成路由器兼容的路線：

// Iterate over `allRoutes` to produce the following. 
// The `label` property is gone. 
const routerFriendlyRoutes: Routes = [ 
    { path: 'home', component: HomeComponent }, 
    { path: 'contact', component: ContactComponent }, 
    // ... 
};