Question

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

我试过这个，但结果是我得到了//被捕获的所有数据到名为categorySlug-:categoryId和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

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

Answer 1

创建一个自定义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,
  }
]

在具有Angular 4路由器的URL中使用路由器参数

1 个答案: