我在Angular中遇到问题:我有三个链接,其中一个具有查询参数(由于使用了解析器)。如果单击第一个和第三个链接,则会设置routerLinkActive
。如果我单击第二个链接,routerLinkActive
也被设置。但是,如果我更改了组件routerLinkActive
中的查询参数,则会被取消设置。
因此,我需要忽略查询参数。但是它是如何工作的呢?谁能帮我吗?
这是我的简单代码:
<div class="col-12">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a
class="nav-link"
routerLink="/einstellungen/allgemein"
routerLinkActive="active">
Allgemein
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
[routerLink]="['/einstellungen/kalender']"
[queryParams]="{branch: myBranches[0].id}"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact: false}">
Kalender verwalten
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
*ngIf="user.is_admin"
routerLink="/einstellungen/filialen"
routerLinkActive="active">
Filialen verwalten
</a>
</li>
</ul>
</div>
答案 0 :(得分:5)
RouteLinkActive仅适用于确切的查询参数。您可以尝试将{exact:false}作为routerLinkActiveOptions传递。如果那不起作用
您可以在[class.active]属性内调用函数。
<a class="nav-link" [routerLink]="['/einstellungen/kalender']" [queryParams]="{branch: myBranches[0].id}" [class.active]="isLinkActive('/my-link')">Kalender verwalten</a>
isLinkActive(url): boolean {
const queryParamsIndex = this.router.url.indexOf('?');
const baseUrl = queryParamsIndex === -1 ? this.router.url :
this.router.url.slice(0, queryParamsIndex);
return baseUrl === url;
}
答案 1 :(得分:1)
使用隐藏的定位标记和html模板变量:
<a [routerLink]="/einstellungen/kalender" routerLinkActive="" #rla="routerLinkActive" hidden></a>
<a
class="nav-link"
[routerLink]="['/einstellungen/kalender']"
[queryParams]="{branch: myBranches[0].id}"
[class.active]="rla.isActive">
Kalender verwalten
</a>