使用Angular的路线集合来填充导航区域

Question

在Angular 2中开发应用程序时，我发现我的应用程序中有多余的代码。 从文件导出路由以供RouterModule使用后，我可以想象它将成为事实的单一来源-重新用于填充应用程序中的导航区域。

问题是， 路由接口项不允许任何类型的“标签”属性。 如果是这样，我可以遍历该数组，选择一个指定级别（根或子级或任何路由），如果路径不是''或**我将返回该项目并使用其label 。

现在，听起来很如意，我只想描述问题。 有人为此目的提出过偷偷摸摸的解决方案吗？

有一会儿，我想到克隆路由集合，并在每个项目的顶部添加我自己的标签，但这又会在另一端产生一些不必要的代码

Answer 1

Angular应用程序中的路由只是对象的数组。 换句话说，它们是一个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 },
  // ...
};