Question

我知道我们可以使用'/:id'在路由器路径中设置参数。但我想创建一个不确定长度的数组，如下所示：'/:id1/:id2/:id3/...'

目前我正在管理最多三个这样的参数：

const routes: Routes = [
    { path: '/:name1',  component: MyComponent,   canActivate: [ LocalUserGuard ] },
    { path: '/:name1/:name2',  component: MyComponent,   canActivate: [ LocalUserGuard ] },
    { path: '/:name1/:name2/:name3',  component: MyComponent,   canActivate: [ LocalUserGuard ] }

但是我想将它扩展到任意数量的参数。

Answer 1

如果您希望它完全是任意的，您可以使用wildcard route：

const routes: Routes = [
  { path: '**', component: MyComponent, canActivate: [ LocalUserGuard ] },
]

然后在MyComponent内，您可以通过ActivatedRoute：

访问网址细分受众群

@Component({...})
export class MyComponent { 
  constructor(private route: ActivatedRoute) {
    route.url.subscribe((segments: UrlSegment[]) => {
      // do whatever you need to with the segments
    });
  }
}

参见示例Plunker：http://plnkr.co/edit/9YYMwO?p=preview

Answer 2

您可以使用UrlMatcher来匹配您想要的任何类型的网址。

function tagRoute(url: UrlSegment[]) {
  if(url[0].path.match('tags-list'))
  {
    return ({consumed: url})
  }else {
    return null;
  }
}

const appRoutes: Routes = [
{matcher: tagRoute, component: TagComponent },  
{path:'**', component: HomeComponent}
];

然后您可以使用 TagComponent 中的 ActivatedRoute 来获取上面提到的@johnrsharpe的网址片段。

this.activateRoute.url.subscribe((segments: UrlSegment[]) => {
    segments.shift();
    segments.join('/');
});

路线

2 个答案: