查询 URL 中带有多个斜杠的参数答案

【问题标题】：Query params with multiple slashes in URL查询 URL 中带有多个斜杠的参数
【发布时间】：2017-08-09 12:25:43
【问题描述】：

事情是这样的……

基础

Angular 4.2.1
Angular CLI 1.0.3

问题

我已将 URL 路由定义为 path: 'shop/:shopId',

我有一个shop component。在商店组件中，我正在读取 shopId 并将其传递给 API。一切都很好。

但是

商店的网址有时可能类似于以下内容

/商店/女性
/商店/女士/衬衫
/shop/men/titan/watches

对于#2 和#3，我无法将women/shirts 和men/titan/watches 作为shopId。

注意：我对 URL 没有任何限制，它最多可以有 10 到 15 个参数，因此定义 10 到 15 条路线会很麻烦。

它转到另一个带有 2、3 或 4 个斜线的 URL。

我的问题是，是否有可能将shop/ 之后的所有内容都设为shopId。

如果是，如何？

如果不是，有什么解决方案，我应该为 2、3、4、5 或 6 个参数创建单独的路由吗？

【问题讨论】：

如果您想处理具有多个此类段的 URL，那么您应该相应地设置路由......我假设您实际上没有名为 titan/watches 的类别，但那是两个不同的类别，主要和子类别，开始 - 所以你应该设置你的系统来接收它们作为两个单独的值；将它们混合在一起没有什么意义。
我认为您应该根据需要定义尽可能多的路径，但都指向同一个组件。
@Ploppy 目前我只这样做，我在确定我的想法是否可行。不过谢谢
@CBroe 是的，这 2 个将是 2 个不同的类别，但我在 API 中传递了规范的 URL，所以我确定是否可能出现上述问题
@CBroe 我忘了提到我对 URL 没有任何限制，可以有 10 或 15 个参数。

标签： angular parameters routes

【解决方案1】：

这是你的路线

{
    path: 'shop',
    component: ShopParentComponent,
    children : [{
        path: '**',
        component: ShopComponent
    }]
}

我已将shop 定义为父路由并定义了** 子路由。 Child 使用ShopComponent 作为组件，Parent 使用ShopParentComponent。

在您的 ShopComponent 构造函数中，我正在使用检测 url 的变化

_router.events.subscribe((val) => {
    console.log(val);
    if(val instanceof NavigationEnd) {
        var url = this._router.url;
        //do anything with url
    }
});

这样的导入路线

import { Router, ActivatedRoute, ParamMap, NavigationStart, NavigationEnd } from '@angular/router';

这将为您提供当前路线

以这条路线为例

http://localhost/shop/a/b/c/d

它会给你

/shop/a/b/c/d

您可以轻松地操纵此网址供您使用。

想知道你的父组件是什么，只有一个

<router-outlet></router-outlet>

【讨论】：