角度路径参数中的前向斜率

时间:2017-06-28 19:18:46

标签: angular angular2-routing

如何设置我的路线以便我的参数可以使用斜杠?

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

这不起作用:

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

路由参数值是否可用?

我已经了解了使用网址编码的网址方法。但是,我希望我的用户能够输入网址。

2 个答案:

答案 0 :(得分: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,您仍然会遇到问题,因为它们被角解释为辅助路线

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

答案 1 :(得分:0)

看起来你必须使用通配符来逃避每个正斜杠:

/*page

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

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