Angular 在角度方向更改零件布线时重新加载零部件

我使用角度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>

标签

{
     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>

{{item.title}

当第一次加载
“/list/car/bmw”
时，会得到一条与
“/list/car/bmw”
url匹配的参数化路线
“list/：category/：subcategory”
。因此，它将呈现组件
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)
    });
}

您使用的是
list/car/benz
还是
/list/car/benz
？使用/list/car/benz使用routerLInk在浏览器上看到的url是什么？路由已工作，但组件未渲染！单击“食物链接组件未渲染”。请尝试使用routerLInk
/fa/list/car/benz