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

Question

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

Итак, у меня есть следующий 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 все еще не определены!!!

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

Спасибо!

Answer 1

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

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

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