首页 文章

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

提问于
浏览 次
2

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

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

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

该页面（“竞争细节”）呈现我的元素：

<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 的不同视图 .

http://localhost:4200/competition/details;competition=219;condition=home 将在第219场比赛中为每支球队的主场比赛提供积分榜 .

http://localhost:4200/competition/details;competition=219 使用来自比赛219的所有比赛创建表格 .

所以，我希望在同一个表中有一个链接导航到新的URL但是当我尝试这样做时它只更改浏览器中的URL但不更改视图 .

以下是我试图导航的方式：

<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（）

有什么想法吗？

angular typescript angular4-router

1 回答

  • 2

    而不是从"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中的路径参数时不会发生重新加载，因为未调用构造函数 . 但是使用subscribe它会听取参数中发生的变化 .

    回复于

相关问题