angular - 带参数的 routerLink 正在更改 URL，但未导航或重新加载组件

Question

我已经查看了相关问题router.navigate changes the URL, but is not rendering the component但同样的情况导致了同样的结果。

我的路线模块中有一条路线:

        {
            path: "competition/details",
            loadChildren: "../pages/competitions/competitions-details/competitions-details.module#CompetitionsDetailsModule"
        }

那个页面(“competition-details”)呈现我的元素:

<standings-regular></standings-regular>

然后在组件中检查 2 个可选参数:

    this.competitionId = this.activatedRoute.snapshot.params.competition;
    this.condition = this.activatedRoute.snapshot.params.condition;

最后我使用这些参数“竞争”和“条件”来构建一个数组。到目前为止，如果我直接在浏览器中使用 URL，一切正常:

例如:http://localhost:4200/competition/details;competition=219;condition=home

现在，这基本上代表了给定比赛的同一张 table 的不同 View ，有一点上下文。

http://localhost:4200/competition/details;competition=219;condition=home 将呈现仅包含来自比赛 219 的每支球队的主场比赛的排名表。

http://localhost:4200/competition/details;competition=219 创建包含比赛 219 的所有比赛的表格。

所以，我想在同一个表中有一个链接来导航到新的 URL，但是当我尝试这样做时，它只会更改浏览器中的 URL，但不会更改 View 。

这是我尝试导航的方式:

        <ul class="dropdown-menu btn-primary dropdown-menu-right">
            <li>
                <a md-ripple [routerLink]="['/competition/details', {competition: '219'}]">Completa</a>
            </li>
            <li>
                <a md-ripple [routerLink]="['/competition/details', {competition: '219', condition: 'home'}]">Home Only</a>
            </li>
        </ul>

我也尝试用 (click)=""事件替换此处的 routerLink，该事件触发组件中的方法进行导航，但结果是一样的，更改浏览器中的 URL，但不执行任何操作。

我尝试了 router.navigate() 和 router.navigateByUrl()

有什么想法吗？

Answer 1

与其从“snapshot.params”获取参数值，不如订阅下面给出的 activatedRoute。

import { ActivatedRoute, Router, ParamMap } from "@angular/router";

将此代码放入您的ngOnInit()

this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
    this.competitionId = params.get('competitionId ');
    let condition = params.get('condition ');
    //business logic what changes you want on the page with this new data.
});

通过快照，由于未调用构造函数，因此在更改 url 中的路径参数时不会发生重新加载。但是使用订阅它会监听参数发生的变化。