angular - 如何从区分大小写的查询参数变量中获取值？

Question

我有一个带有查询字符串id的 URL 。但是，变量id可以在 URL 中以“id”或“Id”的形式出现。

根据我的理解，这两个将被区别对待。为了处理以下 URL，我编写了所附屏幕截图中的代码：

http://xxx/abc?id=10

http://xxx/abc?id=10

在此处输入图像描述

除此之外，是否有任何简单的方法来处理区分大小写的变量并在 angular4 中正确获取值？

Answer 1

正如@vogomatix 所说，您不应该使用不同名称的相同参数。但是，无论出于何种原因，您都可以像这样简化代码：

private findQueryParams() {
    this._route.queryParams.subscribe((params: Params) => {
        const idValue = params['id'] || params['Id'] || '0';
        let id = Number(idValue);
    });
}

这样，您将使用 的值id，如果不存在，则Id，如果不存在，则使用'0'

如您所说，如果可以有更多组合，那么您最好的选择是将参数克隆为小写版本：

function toLower(params: Params): Params {
    const lowerParams: Params = {};
    for (const key in params) {
        lowerParams[key.toLowerCase()] = params[key];
    }

    return lowerParams;
}

有了这个：

private findQueryParams() {
    this._route.queryParams.subscribe((params: Params) => {
        const _params = toLower(params);
        const idValue = params['id'] || '0';
        let id = Number(params);
    });
}

当然，每次从 中获取参数时都必须这样做Router，但这是不可避免的，因为基本缺陷在 Url 系统中。

Answer 2

如果您希望有一个显示特定abc项目的组件，那么您真的应该让您的 URL没有查询参数，而是采用 Routes 的概念

即，而不是让http://xxx/abc?id=10来显示abcid 为 10 的项目，你应该只是有一个路线http://xxx/abc/10

然后，您可以将此路线添加为：

 { path: 'abc/:id', component: abcComponent },

其中 abcComponent 是显示相关项目的组件