Повторное использование маршрута в модуле маршрутизации angular

Question

У меня есть маршрут:

{ path: 'route/:id', component: SomeComponent }

Теперь в моем заголовке я сделал пару разных routerLink s:

<a routerLink="/route/0">route1</a>
<a routerLink="/route/1">route2</a>
<a routerLink="/route/2">route3</a>

В SomeComponent я реализовал ngOnInit вот так:

ngOnInit(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    if (id === 0) {
      this.title = "title0"
    } else if (id === 1) {
      this.title = "title1"
    }else if (id === 2) {
      this.title = "title2"
    }
  }

Я ловлю id из карты параметров и устанавливаю title разные для каждого идентификатора. В моем .html я хочу отображать разные заголовки ({{title}}), когда я нажимаю на routerLink, но когда я нажимаю на него, когда заголовок установлен правильно, но когда я пытаюсь перейти на другой маршрутизатор Link, заголовок остается прежним пока я вручную не обновлю sh страницу.

Я попытался добавить window.location.reload() к ngOnInit(), но это, конечно, многократно обновляет страницу.

Как я могу этого добиться? Спасибо!

Answer 1

Попробуйте получить параметр маршрута, используя observable.

   ngOnInit(){
        this.route.paramMap.subscribe(params => {
            const id = +params.get('id');
            if (id === 0) {
              this.title = "title0"
            } else if (id === 1) {
              this.title = "title1"
            }else if (id === 2) {
              this.title = "title2"
            }
          });
    }