Question

在Angular 2中开发应用程序时，我发现自己的应用程序在路由方面存在冗余代码。一旦我从一个文件导出我的路由以供RouterModule使用，我会想象它成为一个单一的事实来源 - 重新用于在应用程序中填充导航区域。

问题是，Route interface项不允许任何类型的标签＆＃39;属性。如果是这样，我可以迭代数组，选择一个指定的级别（根或子或任何路由），如果路径不是''或**，我会返回该项并使用它{ {1}}。

现在，尽管听起来如意，我只想描述问题。有没有人为此目的找到一个偷偷摸摸的解决方案？

有一刻我想到克隆路线集合并在每个项目的顶部应用我自己的标签，但它会在另一端产生一些不必要的代码

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 },
  // ...
};

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

1 个答案: