Angular: queryParams не работает при программном обновлении URL - PullRequest
Новая
       23

Angular: queryParams не работает при программном обновлении URL

0 голосов
/ 02 мая 2019

Когда я обновляю параметры запроса 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}`;
    }
}

1 Ответ

0 голосов
/ 02 мая 2019

Значение не обновляется, так как снимок маршрута берется при первой загрузке компонента.Значение будет рассчитываться только для первой загрузки компонента и не изменится, пока вы не перезагрузите страницу.

К счастью, вы можете напрямую подписаться на параметры запроса, и это должно помочь вашему варианту использования: 

this.activeRoute.queryParams.subscribe(queryParams => {
        // Do something with the query params
    });
...