在Angular 2+ 中精细指定路线

Question

所以我的应用程序中有一些路由具有类似的 URL，但需要根据 URL 中的某些值转到不同的组件。我试图通过 Guards 完成此操作，但这似乎不起作用：

{
  path: ':makeName',
  component: MakePageComponent,
  canActivate: [ValidMakeGuard]
}, {
  path: ':makeName/:groupName',
  component: MakePageComponent,
  canActivate: [ValidMakeGuard, ValidGroupGuard, ValidMakeGroupGuard]
}, {
  path: ':makeName/:modelName',
  component: ModelPageComponent,
  canActivate: [ValidMakeGuard, ValidModelGuard]
}, {
  path: ':makeName/:modelName/:year',
  component: ModelPageComponent,
  canActivate: [ValidMakeGuard, ValidModelGuard, ValidYearGuard]
}

这是可能的还是我遗漏了一些明显的东西来使这个用例起作用？

Answer 1

“:”语法表示变量。所有的变量都是字符串。因此，如果您通过了：mysite.com/xxx/yyy，此处的路由将不知道如何将其与您的路由相匹配。

您的路由配置需要更多常量。更像是这样的：

make/:makeName/model/:modelName

make/:makeName/group/:groupName

然后路由器将匹配所需的路由。

此外，由于 make/:makeName/model/:modelName 和 make/:makeName/model/:modelName/:year 转到同一个组件，您可以指定如下内容：

make/:makeName/model/:modelName

转到 ModelPageComponent 并将年份作为可选参数传递。

同组:

make/:makeName

转到 MakePageComponent 并将组名作为可选参数传递。

有关更多信息，我在这里有一个示例应用程序：https://github.com/DeborahK/Angular-Routing

Answer 2

我已经在 angular-router 中创建了这个功能，并且有一个未完成的拉取请求和一个 NPM 包，您可以使用它来测试与此相关的内容。添加投票以将其合并并确认它是否适用于您的用例。

https://github.com/angular/angular/pull/16416

当守卫来自更高优先级路线 returns false/rejects.

时，此更改提供了跳转到下一条路线的能力

您可以在您的项目中安装测试如下：

npm uninstall @angular/router --save
npm install @angular/router --registry https://myget.org/F/snaptech/npm --save

两者之间的唯一区别是这将找到所有可能的匹配路线并迭代地遍历它们，直到找到通过所有守卫的路线。如果 none 这样做，那么它会落在 '**' 包罗万象的路线

在Angular 2+ 中精细指定路线

Finely Specify Routes in Angular 2+

angular2-routing

angular