以角度更改零件路由时重新加载组件答案

【问题标题】：reload component when change parts routing in angular以角度更改零件路由时重新加载组件
【发布时间】：2018-12-08 07:48:30
【问题描述】：

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

现在，当我在 HomeComponent (/home) 中单击“/list/car/bmw”时，它可以工作并呈现 ListComponent。但是当我在 ListComponent (/list/car/benz) 中单击“/list/car/bmw”时，这不起作用并且不会呈现 ListComponent。

【问题讨论】：

你使用的是list/car/benz 还是/list/car/benz ？
使用 /list/car/benz
您在使用 routerLInk 的浏览器上看到的 url 是什么？
路由工作但组件不渲染！ localhost:4200/list/Accessories localhost:4200/list/food点击食物链接组件时不呈现。
试试 routerLink /fa/list/car/benz

标签： angular routing angular6 router angular-routerlink

【解决方案1】：

当第一个 "/list/car/bmw" 被加载时，angular 得到一个参数化路由 "list/:category/:subcategory" 匹配 "/list/car/bmw" url。所以它会渲染你的组件ListComponent。
如果通过任何操作（按钮单击或锚点单击“如果您的 url 更改为 "/list/car/benz"，那么它将不会呈现 ListComponent。因为 ListComponent 已经加载了参数化路由 'list/:category/:subcategory'。在这种情况下，路由没有改变，但路由器参数正在改变。

并检测参数变化请使用ActivatedRoute检查参数的任何变化。

第一步 - 做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)
    });
}

【讨论】：