-1

如何尝试将这些类型的 URLprefix/foo-bar-1123与prefix/foo-bar-1123/bazquux-123Angular 4 路由器一起使用？重要的位是我试图捕获的数字 id。

我已经尝试过了，但结果是我得到了 // characted 之间的所有数据，这些数据被捕获到名为categorySlug-:categoryIdand的单个变量subcategorySlug-:subcategoryId中。

const routes = [{
  path: 'prefix/:categorySlug-:categoryId',
  component: MyComponent,
}, {
  path: 'prefix/:categorySlug-:categoryId/:subcategorySlug-:subcategoryId',
  component: MyComponent,
}]

export const MyRoute: ModuleWithProviders = RouterModule.forChild(routes)

最终我想得到这些变量：

categorySlug=foo-bar
categoryId=1123
subcategorySlug=bazquux
subcategoryId=123

这是路由器支持的东西吗？是否可以扩展路由器以支持这些？

4

1 回答 1

0

创建一个自定义 UrlMatcher，可用于实现匹配并从 URL 获取 id。这至少在 Angular 4.4.3 中有效。

const categoryUrlMatcher = (url: UrlSegment[], group: UrlSegmentGroup, route: Route): UrlMatchResult => {
  if (url.length != 2) {
    return null
  }
  if (url[0].path !== 'prefix') {
    return null
  }
  const categoryMatch = url[1].path.match(/(\w+)-(\d+)$/)
  if (categoryMatch) {
    return {
      consumed: url,
      posParams: {
        categorySlug: new UrlSegment(categoryMatch[1], {}),
        categoryId: new UrlSegment(categoryMatch[2], {})
      }}
  }
  return null
}

const routes: Routes = [
  {
    matcher: categoryUrlMatcher,
    component: MyComponent,
  }
]
于 2017-09-26T14:13:32.193 回答