Перезагрузить компонент при смене деталей в угловых

Question

Я использую угловой 6.

У меня есть ListComponent, который показывает список продуктов.

мой маршрут

{
     path: ('list/:category/:subcategory'),
     component: ListComponent
}

тег

<a class="link" [routerLink]="['/list/' + item.titleEn ]">
    {{ item.title }}
</a>

<a class="sub-link" [routerLink]="['/list/' + item.titleEn + '/' + itemSub.titleEn ]"
    {{ itemSub.title }}
</a>

Теперь, когда я нажимаю "/ list / car / bmw" в HomeComponent (/home), это работает и отображает ListComponent. но когда я нажимаю "/ list / car / bmw" в ListComponent (/list/car/benz), это не работает и не отображает ListComponent.

Answer 1

• Когда первый "/list/car/bmw" загружен, то угловой получил один параметризованный маршрут "list/:category/:subcategory" который соответствует "/list/car/bmw" URL-адрес. так что это сделает ваш компонент ListComponent,

• если по какому-либо действию (нажатие кнопки или привязка), если ваш URL-адрес изменился на "/list/car/benz" тогда это не будет оказывать ListComponent, Как ListComponent уже загружен параметризованным маршрутом 'list/:category/:subcategory', В этом случае маршрут не меняется, но параметры маршрутизатора меняются.

И чтобы обнаружить изменение параметра, пожалуйста, используйте ActivatedRoute, чтобы проверить любое изменение параметров.

Шаг 1 - Сделать конструктор Injection of ActivatedRoute

constructor(private activatedRoute: ActivatedRoute) {
   // Code snippet
   this.subscribeRouteChange();
}

Шаг 2 - Подписаться на изменение параметров маршрута

subscribeRouteChange() {
    this.activatedRoute.params.subscribe((params = {}) => {
        // Will log any change to the route.
        // You can add your own logic here
        console.log(params.category);
        console.log(params.subcategory)
    });
}

Answer 2

          this.router.navigate(['your path'])
  .then(() => {
    window.location.reload();
  });