Question

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

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

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

该页面（＆＃34;竞争细节＆＃34;）呈现我的元素：

<standings-regular></standings-regular>

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

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

最后我使用那些参数＆＃34;竞争＆＃34;和＆＃34;条件＆＃34;构建一个数组。到目前为止，如果我直接在浏览器中使用URL，一切都有效：

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

现在，这基本上代表了针对特定竞争的同一桌子的不同观点，对于一点环境。

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>

我也尝试用（点击）=＆＃34;＆＃34;替换routerLink。触发组件中的方法导航但是结果相同的事件，更改浏览器中的URL，但不执行任何操作。

我尝试了router.navigate（）和router.navigateByUrl（）

有什么想法？

Answer 1

而不是从＆＃34; snapshot.params＆＃34;中获取参数值。您应该订阅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会听取参数中发生的变化。

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

1 个答案: