Динамическая маршрутизация с идентификаторами, не отображающими последний компонент Angular

Я не могу перейти к другим динамическим элементам с идентификаторами. Объяснить:

app.component.html

<mat-sidenav-container>
    <mat-sidenav  mode = "side" opened = "true">
      <mat-nav-list>
         <a mat-list-item routerLink = "home" >Home</a>
         <a mat-list-item routerLink = "item/1" >Item 1 </a>
         <a mat-list-item routerLink = "item/2" >Item 2 </a>
         <a mat-list-item routerLink = "item/3" >Item 3 </a>
      </mat-nav-list>
    </mat-sidenav>
    <div class = "container">
      <router-outlet></router-outlet>
    </div>
    </mat-sidenav-container>

приложение-routing.module.ts

export const routes = [
  { path: "home", component: HomeComponent },
  { path: "item/:id", component: AccountsComponent }
];

AccountsComponent

export class AccountsComponent  {
 constructor(private activatedRoute: ActivatedRoute,private router:Router) {}
 public id: string;
 ngOnInit() {
 this.id = this.activatedRoute.snapshot.paramMap.get('id');
 console.info("ID",this.id,"Route",this.router.url); 
   }
}

Чтобы проверить текущий динамический идентификатор, я печатаю параметр URL в своей консоли AccountsComponent, как указано выше. Теперь, если я нахожусь на маршруте 'localhost:4200/home' и нажимаю на Item1, меня перенаправляют на 'localhost:4200/item/1', и AccountsComponent загружается в моем боковом меню, как и ожидалось! В моей консоли также печатается ID 1 Route /item/1. Теперь, если я нажму на Item2, маршрут, показанный выше, будет 'localhost:4200/item/2', но мой sidenavcontent, то есть AccountsComponent, не обновится!! Более того, моя консоль не показывает обновления, т.е. ID2 не печатается.

Я заметил, что, поскольку динамические URL-адреса указывают на один и тот же компонент, модуль маршрутизатора больше не загружает компонент. Это происходит очень хорошо, когда я перехожу от Home->Item1->Home->Item2 и так далее, потому что у маршрута home есть другой компонент для загрузки. См. ссылку stackblitz ниже.

P.S. -

  1. Stackblitz Ссылка
  2. Пожалуйста, не предлагайте использовать разные компоненты для разных идентификаторов, это просто более простой прототип для моей сложной задачи.

Спасибо:)

Вот почему Angular предлагает использовать this.route.paramMap.pipe(switchMap для получения текущего параметра.

yurzui 22.12.2020 11:43
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
1
1 546
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш роутер работает нормально. Вы должны подписаться на изменение параметров маршрута.
Обновите ngOnInit следующим образом


  ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
      this.id = params.id;
      console.info(params.id);
    });
  }

Спасибо. Не могли бы вы объяснить, почему мне это не понадобилось, когда я должен был переключиться с Home на Item1 и так далее?

Swapnil Sourabh 22.12.2020 12:08

Если вы выполните Home->Item1->Home->Item2->home->Item3, вы увидите ожидаемые журналы. Когда вы пытаетесь перейти напрямую от одного элемента к другому элементу, ngOnInit не вызывается повторно, поскольку вы находитесь в том же компоненте. В этом ответе вы подписываетесь на параметры маршрута, поэтому всякий раз, когда происходит изменение в механических параметрах, будет вызываться обратный вызов в подписке.

Asad Hayat 23.12.2020 06:50

Другие вопросы по теме