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的步骤，并尝试使用网址匹配器，但没有运气。

谢谢！

Answer 1

您可以按照以下设置路线来解决问题，

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

所以基本上在这里做的是以pages / ...开头的任何路径都将被这条路线截获，。

要从您的网址中获取不同的细分，您可以在以下组件中使用

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

因此根据您的网址，细分受众群将会有所不同，

路线：/ pages / Folder1 / Page1

<强>段

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

路线：/ pages / Folder2 / Folder3 / Page1

<强>段

[{“path”：“Folder2”，“parameters”：{}}，{“path”：“Folder3”，“parameters”：{}}，{“path”：“Page1”，“参数” ：{}}]

这是StackBlitz example !!

你需要考虑的一件事是外卡路线会吸收任何以页面开头的东西/所以让它最后。

希望这会有所帮助!!

Answer 2

好吧，使用正斜杠作为路线的一部分总是一个挑战。

使用外卡可能是解决问题的方法之一，但它有时可能很危险（如this答案中所述）。

我遇到了同样的问题，我通过将forward slashes转换为plus sign中的URL解决了这个问题。

它允许我保持正常的路由配置，因此URL也变得可读。

为了解决映射问题，我想出了route resolvers。

import { Injectable } from "@angular/core";
import { Resolve, ActivatedRouteSnapshot } from "@angular/router";

@Injectable()
export class PageResolverService implements Resolve<any> {

    resolve(route: ActivatedRouteSnapshot) {
        //assuming route is 'pages/:page'
        let path: String = route.params.page.replace('+', '/');
        //API call goes here
    }
}

路由配置更改为 -

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

最后，我必须处理一个角落案例场景，其中路线名称本身有+签到。其他一切都很好。

我希望这会有所帮助：）

Angular 2.5如何传递路径参数中的/

2 个答案: