时间戳

首页 > 解决方案 > 路由查询参数更改时，角度材质选项卡导航失去活动标记

javascript - 路由查询参数更改时，角度材质选项卡导航失去活动标记

问题描述

我正在使用角度材质导航选项卡：

<nav mat-tab-nav-bar>
    <a mat-tab-link
        [routerLink]="'firstRoute'"
        [queryParams]="{param1: value1, param2: value2}"
        routerLinkActive #rla1="routerLinkActive"
        [active]="rla1.isActive">
    Import
    </a>
    <a mat-tab-link
        [routerLink]="'secondRoute'"
        [queryParams]="{param1: value1, param2: value2}"
        routerLinkActive #rla2="routerLinkActive"
        [active]="rla2.isActive">
    Database
    </a>
</nav>

一切正常，直到我更改查询参数值：

changeQueryParams() {
    const params = {
      param1: 'newValue1',
      param2: 'newValue2'
    };
    this.router.navigate([], { relativeTo: this.route, queryParams: params });
}

每次我调用此方法时，当前选项卡都会丢失激活标记（文本下方的蓝色边框）。我在这里错过了什么？

标签： javascriptangularangular-material

解决方案

可能有点晚了，但尝试将 queryParamsHandling="merge" 添加到 mat-tab-link 标记。当您在选项卡之间导航时，它还将保留参数。

<a mat-tab-link
    [routerLink]="'firstRoute'"
    [queryParams]="{param1: value1, param2: value2}"
    routerLinkActive #rla1="routerLinkActive"
    queryParamsHandling="merge"
    [active]="rla1.isActive">
Import
</a>

这个对我有用。

推荐阅读