带段通配符的 Angular 路由

Question

我正在为 Angular 6 应用程序设置路由，我想要一条可以匹配可变数量的段的路由。目前我有一个看起来像这样的路由配置:

const routes: Routes = [
  { path: '', redirectTo: '/catalog', pathMatch: 'full' },
  { path: 'login', component: LoginFormComponent },
  { path: 'catalog', component: CatalogComponent, canActivate: [SessionGuard] },
  { path: 'repo/:name', component: RepositoryComponent, canActivate: [SessionGuard] }
];

匹配 repo/test 这样的 url 并将其发送到 RepositoryComponent，但是 repo/foo/bar 引发错误:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'repo/foo/bar'
Error: Cannot match any routes. URL Segment: 'repo/foo/bar'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1341)

我习惯了 ASP.NET MVC 中的约定，它允许我声明这样的路由:

[HttpGet("repo/{*name}")]

这将同时匹配 repo/test 和 repo/foo/bar 并将所有内容放在第一个斜杠之后(test 或 foo/bar) 在 name 参数中。有没有办法获得与 Angular 等效的行为？

Answer 1

显然没有内置的方法可以做到这一点。我最终得到的是这样的路由设置:

const routes: Routes = [
  { path: '', redirectTo: '/catalog', pathMatch: 'full' },
  { path: 'login', component: LoginFormComponent },
  { path: 'catalog', component: CatalogComponent, canActivate: [SessionGuard] },
  { path: 'repo', component: RepositoryComponent, canActivate: [SessionGuard], children: [{
    path: '**', component: RepositoryComponent
  }] }
];

处理请求路由，但不处理参数评估。要获得与 ** 通配符匹配的段，我需要在我的 RepositoryComponent 上注入(inject)的 Router 对象中搜寻:

getRepo(): void {
  this.Name = this.route.snapshot.children[0].url.join('/');
}