Я не могу перейти к другим динамическим элементам с идентификаторами. Объяснить:
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. -
Спасибо:)
Ваш роутер работает нормально. Вы должны подписаться на изменение параметров маршрута.
Обновите ngOnInit
следующим образом
ngOnInit() {
this.activatedRoute.params.subscribe(params => {
this.id = params.id;
console.info(params.id);
});
}
Спасибо. Не могли бы вы объяснить, почему мне это не понадобилось, когда я должен был переключиться с Home на Item1 и так далее?
Если вы выполните Home->Item1->Home->Item2->home->Item3, вы увидите ожидаемые журналы. Когда вы пытаетесь перейти напрямую от одного элемента к другому элементу, ngOnInit не вызывается повторно, поскольку вы находитесь в том же компоненте. В этом ответе вы подписываетесь на параметры маршрута, поэтому всякий раз, когда происходит изменение в механических параметрах, будет вызываться обратный вызов в подписке.
Вот почему Angular предлагает использовать
this.route.paramMap.pipe(switchMap
для получения текущего параметра.