如何在 Angular 5 中创建/更新 ParamMap？答案

【问题标题】：How to create/update a ParamMap in Angular 5?如何在 Angular 5 中创建/更新 ParamMap？
【发布时间】：2018-02-19 16:46:08
【问题描述】：

在 Angular 5 中，Router/ParamMap 对象是不可变的。它可以从路由中检索并在组件中使用。但是，我有一个用例，修改 ParamMap 会很方便（它在 Angular 4 上运行良好）。

之前，我使用convertToParamMap 函数将Object 转换为ParamMap。自从更新到 Angular 5 后，当我调用生成的 ParamMap 的 .get(key) 方法时，生成的 ParamMap 对象的私有 params 成员丢失了它的原型并生成错误。

const params = this.routeParams.keys.reduce(
    (pv: Params, cv) => {
        pv[cv] = this.routeParams.get(cv); // <- Error on second call
        return pv;
    },
    Object.create(null) as Params
);
params["changedKey"] = newValue;
this.routeParams= convertToParamMap(params);

this.routeParams 最初是通过调用ActivatedRoute 实例的queryParamMap 方法填充的，并且只需将我的组件的routeParams 成员设置为返回的ParamMap 实例。

在我第一次通过上面的代码时，一切正常。在第二遍中，在我使用 convertToParamMap 函数更新了 routeParams 成员后，我收到此错误：

Object doesn't support property or method 'hasOwnProperty'

通过调试器，.get(cv) 调用在内部调用.has(cv) 方法，然后调用this.params.hasOwnProperty(name) (this = ParamMap 对象和name = cv)。我认为这是 Angular 5 中的一个错误，但我正在寻找替代方案或解决方法，直到它得到修复。

有什么建议吗？

【问题讨论】：

请问那个“用例”可能是什么？因为，老实说，这听起来很尴尬和可怕 - 无意冒犯：/如果你想更改参数，请继续更改路线及其参数。您正在做的是不同步实际路线和您正在处理的参数。这绝不是个好主意。
分页 - 专门更改当前页面或页面大小。在这两种情况下都不会调用新路由，因此为了使组件中其他地方使用的路由参数与显示的内容保持同步，我不得不为此手动添加代码。可能有更好的方法，但这是我的第一个 Angular 2+ 项目，只有几个小型 AngularJS 项目以供之前的经验。
如果您想更改 pageSize 或 selectedPage ，您可以首先将其添加到您的路线中（这将是最好的解决方案，因为如果刷新页面会产生相同的内容，如果您将其保留在路由中）当您仅使用不同的参数调用相同的路由时，该路由不会重新加载，它只会更新可观察的 routeParams - 或者只是为其使用普通的类变量。没有理由将它hack到路由参数中，如果它们首先是'路由参数'。希望我能帮忙:)

标签： angular angular5 angular-router

【解决方案1】：

我不太确定这是最好的方法，但它对我有用。

我正在创建这样的初始值，而不是 Object.create(null) as Params：

const initialValue = Object.create((this.routeParams as any).params.__proto__);

这将创建一个“空”对象，其原型与原始私有 params 对象的原型相匹配，因此在调用 convertToParamMap 函数后，生成的 ParamMap 实例的内部 params 对象具有 hasOwnProperty(name) 方法.

就我个人而言，我不喜欢从包含它们的对象外部调用私有成员，但这很有效，所以我会一直使用它，直到出现更好的选择。

【讨论】：