1

当我像这样以编程方式更新 url 的查询参数时：

window.history.pushState({}, '', 'http://localhost:4200/#/some/url?param=value');

然后尝试使用ActivatedRoute如下服务获取此参数：

let params = this._activatedRoute.snapshot.queryParams;
console.log(params);

我得到这个结果：

{param: ''} // should be {param: 'value'}

有人可以解释这种行为吗？提前致谢。

我的实际代码：

let url = LocationManager.addParam({key: 'param', value: 'value'});
window.history.pushState({}, '', url);
this._activatedRoute.queryParams.subscribe(queryParams => {
     console.log({queryParams});
});

我创建的服务：

export class LocationManager{

    /**
     * Get value of param
     * @param param 
     * @returns value
     */
    static param(param){
        return this.params()[param];
    }

    /**
     * add param to url
     * @param param 
     * @returns url
     */
    static addParam(param: {key: string, value: string}){
        let params = this.params();
        params[param.key] = param.value;
        return this.buildURL(params);
    }

    /**
     * Return query params of url
     */
    static params(){
        let params = {};
        let url = window.location.href;

        if(url.includes('?')){
            let paramsString = url.split('?')[1];
            let p = paramsString.split('&');

            p.forEach((item) => {
                let kv = item.split('=');
                params[kv[0]] = kv[1];
            });
        }

        return params;
    }

    /**
     * Build url from query params
     * @param params 
     */
    static buildURL(params: {}){
        let array = [];
        for(let key in params){
            array.push(`${key}=${params[key]}`);
        }
        let paramsString = array.join('&');
        let url = window.location.href;
        let splietdURL = url.split('?');
        return `${splietdURL[0]}?${paramsString}`;
    }
}
4

1 回答 1

2

该值不会更新，因为路线的快照是在组件第一次加载时拍摄的。该值只会在组件的第一次加载时计算，除非您重新加载页面，否则不会更改。

幸运的是，您可以直接订阅查询参数，这应该有助于您的用例：

this.activeRoute.queryParams.subscribe(queryParams => {
        // Do something with the query params
    });
于 2019-05-02T15:40:19.187 回答