Angular 中的动态页面 URL

Question

我有以下路由器配置：

@NgModule({
 imports: [
  RouterModule.forChild([
   { path: 'office', component: OfficePage},
   { path: 'office/:category1/', component: OfficeInnerPage},
   { path: 'office/:category1/:category2', component: OfficeInnerPage},
   { path: 'office/:category1/:category2/:category3', component: OfficeInnerPage},
   { path: 'office/:category1/:id', component: DetailPage}
  ])
 ],
})

OfficeInerPage - 控制器列表

DetailPage - 控制器详细信息

:id 示例 os10198

URL 个例子

http://example.com/office/business_center/subway/

http://example.com/office/business_center/subway/arbat

http://example.com/office/business_center/os10198

问题

Angular 路由器状态 :category1/:category2/ 重写 :category1/:id 状态。我怎样才能解决这个问题？

Answer 1

您需要添加一个额外的路径名，例如：

{path: 'office/:category1/item/:id', component: DetailPage}

否则 angular 无法知道你是想去 :category2 还是 :id，因为你的数组中最后一个是 :id , 它将否决第一个

Answer 2

我找到了解决办法。

路由器中的某处 (source code)。我找到了属性matcher，这是一个Function，可以让你自己处理路由。

在我的例子中，我编写了以下函数：

function pathMatcher(segments: UrlSegment[], group: UrlSegmentGroup, route: Route) {

  if (segments.length > 2) {

    if(segments[2].path.match(/([\w|]+[\d]+)/)) {

      let posParams = {'id': segments[2]};

      return {consumed: segments, posParams: posParams};

    } else {
    return null;
    }
  } else {
   return null;
  }

}

我的路由器配置：

@NgModule({
  imports: [
    RouterModule.forChild([
      {path: 'office', component: OfficePage},
      {path: 'office/:category1', component: OfficeInnerPage},
      {path: 'office/:category1/:category2/:category3', component: OfficeInnerPage},
      {path: 'office/:category1/:category2/:category3/:category4', component: OfficeInnerPage},
      {matcher: <any>pathMatcher, component: DetailPage}, // <- here is matcher, also its conflicts with path property
      {path: 'office/:category1/:category2', component: OfficeInnerPage}, // it should be below state with matcher
    ])
 ],
})

现在我决定更正这些类型的链接：

http://example.com/office/business_center/subway/ http://example.com/office/business_center/os10198

P.S。有用 gist

Angular 中的动态页面 URL

Dynamic page URLs in Angular

angular2-routing

angular