Question

我有动态路线可以在参数内包含斜杠或反斜杠，例如：

http://localhost:4200/dashboard/T64/27D我应该导航到包含路线T64/27D

的页面

这是我的导航方式 this.router.navigate(['dashboard/'+this.groupListPage[0].code]); this.groupList[0].code包含T64/27D

实际上，Angular将T64和27D分隔为两个不同的页面。

这是错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/T64/27D'
Error: Cannot match any routes. URL Segment: 'dashboard/T64/27D'

我如何告诉Angular /是参数的一部分？

Answer 1

我不认为可以通过路径选择来做到这一点。它完全适用于queryparams tho。

您也可以尝试使用％2F来转义斜杠，但我不能100％确定角度将采用/解析它。

Answer 2

确定路线：

{
    path: 'dashboard/:id',
    component: FooComponent
 }

并且：id可以存在于{＆＃39; abc＆＃39;，＆＃39; ab / c＆＃39;}中，以便考虑内部＆＃39; /＆＃39;作为路径的一部分，您需要使用自定义UrlMatcher：

const customMatcher: UrlMatcher = (
  segments: UrlSegment[],
  group: UrlSegmentGroup,
  route: Route
): UrlMatchResult => {
  const { length } = segments;
  const firstSegment = segments[0];
  if (firstSegment.path === "dashboard" && length === 2 || length === 3) {
    // candidate for match
    const idSegments = segments
      .slice(1); // skip prefix
    const idPaths = idSegments.map(segment => segment.path);
    const mergedId = idPaths.join('/');// merge the splitted Id back together
    const idSegment: UrlSegment = new UrlSegment(mergedId, { id: mergedId });
    return ({ consumed: segments, posParams: { id: idSegment } });
  }
  return null;
};

可以在此blitz

中找到一个工作示例

Answer 3

对于仍在寻找它的任何人，如果您的param中有特殊字符，则可以通过以下方式使用navigate方法：

this.router.navigate(['dashboard', param]);

这样，Angular会自动在param中转义特殊字符

Answer 4

  You must define it in your routes.
  //if two param
  {
    path: 'dashboard/:id1/:id2',
    component: yourComponent
  }
  //if only one param
 {
     path: 'dashboard/:id1',
     component: yourComponent
 }
 {
     path: 'dashboard',
     component: yourComponent
 }
 and then navigate to your path
 this.router.navigate(['dashboard/'+this.groupListPage[0].code]);

角度路由器：忽略路径参数中的斜杠

4 个答案: