ActivatedRoute.queryParams не определен после обновления экрана в Angular 5 - PullRequest
Новая
       41

ActivatedRoute.queryParams не определен после обновления экрана в Angular 5

0 голосов
/ 18 октября 2018

Пожалуйста, помогите!

Итак, у меня есть следующий URL 

https://xxx.io/#/route1/yyyyyyyy?tj=3&bd=7

И когда я перехожу к нему, у меня есть код следующего кода: 

this.route.queryParams.subscribe((res: any) => {
        console.log('tj: ' + res.tj)
        console.log('bd: ' + res.bd)

Теперь это печатает то, что я ожидаю, это tj: 3 и bd: 7

Но когда я обновляю экран, это res.tj и res.bd не определены.Как это может быть?

Первоначально это происходило, потому что я заметил, что URL при обновлении экрана изменился на: 

https://xxx.io/#/route1/yyyyyyyy%3D3&bd%3D7

Но это было связано с проблемами кодирования URL, поэтому ядобавил CustomUrlSerializer, например, так: 

import { UrlSerializer, UrlTree, DefaultUrlSerializer } from '@angular/router';

export class CustomUrlSerializer implements UrlSerializer {

  parse(url: string): UrlTree {
    const dus = new DefaultUrlSerializer();
    return dus.parse(url);
  }

  serialize(tree: UrlTree): any {
      const dus = new DefaultUrlSerializer();
      let path = dus.serialize(tree);
      return path.replace("%3F", "?").replace(/%3D/g, "=");
  }
}

И это исправило эту проблему, так что после обновления URL снова верен: 

https://xxx.io/#/route1/yyyyyyyy?tj=3&bd=7

Но res.tj и ts.bd по-прежнемуundefined !!!

Застряли на этом в течение нескольких часов, так что надеясь, что кто-то может пролить свет на то, почему это происходит, и как я могу это исправить?

Спасибо!

1 Ответ

0 голосов
/ 19 октября 2018

Angular NavigationExtras интерфейс имеет свойство preserveQueryParams, установка его на true может помочь в вашем случае

Типичное использование: 

this.router.navigate(['/view'], { preserveQueryParams: true });
...