Angular 2.5如何在路由参数中传递/

Question

我用谷歌搜索了这个问题，但没有成功。

是否可以使用“/”作为路由参数的一部分？例如，我有以下路线:

{
    path: 'pages/:page',
    component: HomeComponent
}

我想将 folderName/Page 传递到 :page 参数中，所以如下: /pages/testFolder/testPage 将匹配上述路径。

我无法创建额外的路由，因为这需要是动态的(即 /pages/folder/folder/folder/folder/folder/folder/page)。

如果可行，请告诉我。

我已经尝试了 Forward Slash in Angular Route Parameters 中的步骤并尝试使用 url-matcher，但没有成功。

谢谢!

Answer 1

您可以像下面这样设置您的路线来解决您的问题，

  {
    path: 'pages',
    children: [
      {
        path: "**", component: PagesComponent
      }
    ]
  }

所以这里所做的基本上是任何以 pages/... 开头的路径都将被此路由拦截。

要从您的 URL 获取不同的段，您可以在您的组件中使用以下内容，

constructor(route: ActivatedRoute) {
   route.url.subscribe(segments => // use segments as suitable );
}

因此根据您的网址，分割会有所不同，

路线 :/pages/Folder1/Page1

分割

 [ { "path": "Folder1", "parameters": {} }, { "path": "Page1", "parameters": {} } ]

路线:/pages/Folder2/Folder3/Page1

分割

[{“路径”:“Folder2”，“参数”:{}}，{“路径”:“Folder3”，“参数”:{}}，{“路径”:“Page1”，“参数” : {} } ]

这里是 StackBlitz example !!

你必须考虑的一件事是通配符路由会吸收任何以 pages/开头的东西，所以让它放在最后。