angular - Angular 路由参数中的正斜杠

Question

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

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

这行不通:

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

是否可以在路由参数值中使用/？

我读过有关使用 URL 编码的 URL 方法。但是，我希望我的用户能够键入 URL。

Answer 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对括号进行编码，您必须在您的组件中对它们进行解码。