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

Posted 2023-02-22

【中文标题】角度路由器：忽略路径参数中的斜杠

【英文标题】：Angular router: ignore slashes in path parameters

【发布时间】：2018-10-28 16:08:23

【问题描述】：

我的动态路由可以在参数中包含斜杠或反斜杠，例如：

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 / 是参数的一部分？

【问题讨论】：

您可以做的是在不同的变量中获取参数的 2 部分，例如您的状态中的 dashboard/:param1/:param2'，然后使用 param1 + '/' + param2 重新组合它。在某种程度上是一种解决方法，但它应该可以工作

问题是我并不总是有斜线..

【参考方案1】：

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

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

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

【参考方案2】：

假设路线：

    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 中找到一个工作示例

【讨论】：

感谢您，我发现了 UrlMatcher，Nawsen 的回复解决了这个问题，在我的情况下它比 UrlMatcher 更简单

很难找到真正有用的示例如何用斜线映射参数。非常感谢。

爱它！只需 2 个注意事项：customMatcher 是硬编码的，修改 1）路径 ===“仪表板”到您的应用程序，以及 2）返回的参数名称（... id: - 我使用了 path/:tool 代替path/:id 所以不得不重命名为 tool: idSegment

【参考方案3】：

我认为使用 pathparams 不可能做到这一点。它可以完美地与查询参数一起使用。

您也可以尝试使用 %2F 转义斜线，但我不能 100% 确定 angular 将如何处理/解析它。

【讨论】：

问题解决了，Angular解析好参数并自动将%2F转换为/

【参考方案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]);

【讨论】：

一种可能的解决方案，但效果不佳。在同一个组件中处理 id 参数的重组是您没有包含的额外逻辑。

问题是确定路由路径。所以我给出了适当的答案。使用 ActivatedRoute 来获取参数值是额外的逻辑，但我没有包含它，因为它与问题无关。