routerLinkActive 允许任何查询参数答案

【问题标题】：routerLinkActive allow any query paramsrouterLinkActive 允许任何查询参数
【发布时间】：2017-02-02 09:16:25
【问题描述】：

我正在尝试在以下情况下使用 routerLinkActive

'./path1' 链接 path1 应该是活动的。

'./path1?param1=70000&param2=test2' 链接 path1 应该处于活动状态。

'./path1/path2' 链接 path2 应该是活动的。

 <a [routerLink]="./path1" [routerLinkActiveOptions]="{ exact: true }"
  [routerLinkActive]="['active']">My link</a>

带有 routerLinkActiveOptions 的 path1 和 queryparams 未激活。

如何配置 routerLinkActive 以使用任何查询参数？

【问题讨论】：

您可以使用queryParams。更多信息：Docs
是否可以将其配置为允许任何查询参数？

标签： angular

【解决方案1】：

您可能想查看this question。他设法通过添加另一个 a 标签使其工作，但将其隐藏，并将所有内容包装在 li 标签内。好像。

<li routerLinkActive="active">
    <a [routerLink]="['/view', 10]"                 
       [queryParams]="{'offset': 0, 'numberOfItems': 100}" 
       queryParamsHandling="merge">
        <div>View</div>
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
    <a [routerLink]="['/view', 10]" style="display:none;">                
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
</li>

【讨论】：

【解决方案2】：

我也遇到了同样的问题，解决方法如下：（我的Angular版本是13）

HTML：

<a
[routerLink]="'/path1'"
[queryParams]="{ sample: 'xxx' }"
[routerLinkActiveOptions]="routerLinkActiveOptions"
routerLinkActive="active" >My link</a>

ts:

routerLinkActiveOptions: IsActiveMatchOptions = {
matrixParams: 'ignored',
queryParams: 'ignored',
fragment: 'ignored',
paths: 'exact'
};

此代码仅激活具有确切路径的链接并忽略查询参数。您可以在以下链接中阅读有关“IsActiveMatchOptions”的更多信息： IsActiveMatchOptions

【讨论】：