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

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", то angular получает один параметризованный маршрут "list/:category/:subcategory", соответствующий URL-адресу "/list/car/bmw".поэтому он будет отображать ваш компонент ListComponent.

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

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

Шаг 1 - Выполнить инъекцию конструктора 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)
    });
}