angular - 以角度更改零件路由时重新加载组件

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>

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

Answer 1

• 当第一次 "/list/car/bmw"加载时，angular 会得到一个与url"list/:category/:subcategory"匹配的参数化路由。"/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)
    });
}