角度路由参数中的正斜杠答案

【问题标题】：Forward Slash in Angular Route Parameters角度路由参数中的正斜杠
【发布时间】：2017-06-28 19:18:46
【问题描述】：

如何设置我的路由，以便我的参数可以使用正斜杠？

例如：myapp.com/file/rootfolder/subfolder/myfile

这不起作用：

const SECTION_ROUTES: Routes = [
    { path: 'file/:path', component: FileStoreComponent }
];

是否可以在路由参数值中包含 /？

我已经阅读了使用 URL 编码的 URL 方法。但是，我希望我的用户能够键入 URL。

【问题讨论】：

为什么不让您的用户输入 url，然后在提交之前对其进行 URL 编码？无论如何，您可能应该使值安全以防止恶意行为，只需使您的 URL 编码成为该功能的一部分。
我想让 URL 易于阅读，就像通过电子邮件提供时一样。有没有办法在到达路由器之前获取 URL 并对其进行编码？
啊，我以为你的意思是通过输入。
这个 github 问题说您必须使用通配符转义每个正斜杠，例如 /*page:github.com/angular/angular/issues/8049。这个问题也包括它：stackoverflow.com/questions/36597832/…
我用 'file/*path' 试过了。无法解析路由...“错误：无法匹配任何路由。URL 段：\'file/folder1/folder2/file\'\n”（我的 Angular 版本设置为 ^4.0.0.0。）

标签： angular angular2-routing

【解决方案1】：

要使用最新版本的 Angular（对我来说是 9.X）实现此目的，您可以使用 Route.matcher 参数。这是一个例子：

function filepathMatcher(segments: UrlSegment[], 
                         group: UrlSegmentGroup, 
                         route: Route) : UrlMatchResult {
  // match urls like "/files/:filepath" where filepath can contain '/'
  if (segments.length > 0) {
    // if first segment is 'files', then concat all the next segments into a single one
    // and return it as a parameter named 'filepath'
    if (segments[0].path == "files") {
      return {
        consumed: segments,
        posParams: {
          filepath: new UrlSegment(segments.slice(1).join("/"), {})
        }
      };
    }
  }
  return null;
}

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { matcher: filepathMatcher, component: FilesComponent },
  // ...
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

您将能够通过ActivatedRoute.paramMap 访问组件中的参数

请注意，查询参数也可以正常工作并保留。

但是，如果 URL 包含括号，您仍然会遇到问题，例如 /files/hello(world:12)/test，因为它们被 Angular 解释为辅助路由

在这种情况下，您可以添加 custom UrlSerializer 来编码括号，并且您必须在组件中对其进行解码。

【讨论】：

【解决方案2】：

看起来你必须像这样使用通配符来转义每个正斜杠：

/*page

这个问题涵盖了它：Angular2 RouterLink breaks routes by replacing slash with %2F

该问题链接到以下更深入的 GitHub 问题单：https://github.com/angular/angular/issues/8049

【讨论】：

%2f 在空间是他们的时候出现
我用'file/*path'试过了。无法解析路由...“错误：无法匹配任何路由。URL 段：\'file/folder1/folder2/file\'\n”（我的 Angular 版本设置为 ^4.0.0.0。）
你找到解决办法了吗？