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

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 分开为 2 个不同的页面。

这是错误：

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

  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]);

Answer 2

我认为使用路径参数不可能做到这一点。它会完美地与 queryparams 一起工作。

您也可以尝试使用 %2F 转义斜线，但我不是 100% 确定 angular 如何 take/parse 这个。

Answer 3

假定路线：

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

而:id可以存在于{'abc','ab/c'}中，为了将内部'/'视为路径的一部分，您需要使用自定义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 4

对于仍在寻找此内容的任何人，如果您的 param 中有特殊字符，请按以下方式使用 navigate 方法：

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

这样Angular会自动转义param

中的特殊字符

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

Angular router: ignore slashes in path parameters

url

routing

typescript

angular

angular-router