angular - 以 Angular 更改零件布线时重新加载组件

Question

I use angular 6.

I have ListComponent which show list of products.

我的路由

{
     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 得到了一个参数化的路由 "list/:category/:subcategory"哪个匹配 "/list/car/bmw"网址。所以它会渲染你的组件 ListComponent .

如果通过任何操作(按钮单击或 anchor 单击)，如果您的 url 更改为 "/list/car/benz" 那么它不会呈现 ListComponent 。因为 ListComponent 已经加载了参数化路由 'list/:category/:subcategory' 。 在这种情况下，路由是没有改变，但路由器参数正在改变 .

并检测参数变化请使用 激活路由 检查参数的任何更改。

步骤 1 - 做 ActivatedRoute 的构造函数注入(inject)

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)
    });
}