我在Angular中使用routerLink,如下所示
<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>
</li>
当URL看起来像
时,.active类被添加到li标签/view/10?offset=0&numberOfItems=100
如果网址已将offset
或numberOfItems
更改为其他值,则会删除.active类,例如。
/view/10?offset=0&numberOfItems=120
我浏览了angular docs并设法通过添加另一个routerLink使其工作,但将其隐藏如下。
<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>
看来上面的方法有点乱。当路由器参数与可选查询参数一起出现时,是否有任何配置可以使routerLinkActive正常工作?
答案 0 :(得分:1)
我遇到了同样的问题,但根据https://github.com/angular/angular/issues/13205
,这似乎是设计使然vsavkin是路由器的创建者。
答案 1 :(得分:1)
您可能会发现这很有用-扩展RouterLinkActive-如果某个项目包含字符串,则将其“选中” ...
import { Directive, Input, OnChanges, ElementRef, Renderer2, ChangeDetectorRef, SimpleChanges, Injector, AfterContentInit } from '@angular/core';
import { Router,RouterLinkActive, RouterLink, RouterLinkWithHref } from '@angular/router';
@Directive({
selector: '[routerLinkActiveQS]',
exportAs: 'routerLinkActiveQS'
})
export class RouterLinkQsactiveDirective extends RouterLinkActive implements OnChanges, AfterContentInit
{
@Input()
set routerLinkActiveQS(data: string[]|string) {
(<any>this).routerLinkActive = data;
}
@Input() routerLinkActiveQSContains : string;
constructor ( injector: Injector ) {
super ( injector.get(Router),injector.get(ElementRef),injector.get(Renderer2),injector.get(ChangeDetectorRef));
(<any>RouterLinkQsactiveDirective.prototype).isLinkActive = this.MyisLinkActive;
}
ngOnChanges(changes: SimpleChanges): void {
super.ngOnChanges(changes);
}
ngAfterContentInit(): void {
super.ngAfterContentInit();
}
private MyisLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean {
const result = (link: RouterLink | RouterLinkWithHref) => {
let resultInsde = router.isActive(link.urlTree, this.routerLinkActiveOptions.exact);
resultInsde = resultInsde || router.url.includes ( this.routerLinkActiveQSContains );
return resultInsde;
}
return result;
}
}
答案 2 :(得分:0)
该解决方案适用于 Angular 11。无论查询参数如何,都将链接设置为活动状态(仅比较段/路径)。
import * as _ from 'lodash';
import {
AfterContentInit,
ChangeDetectorRef,
Directive,
ElementRef, Input,
OnChanges,
OnDestroy,
Optional,
Renderer2, SimpleChanges
} from '@angular/core';
import { Router, RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
@Directive({
selector: '[rcRouterLinkActive]',
exportAs: 'rcRouterLinkActive',
})
export class RcRouterLinkActiveDirective extends RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
@Input()
set rcRouterLinkActive(data: string[]|string) {
const classes = Array.isArray(data) ? data : data.split(' ');
(<any>this).classes = classes.filter(c => !!c);
}
constructor(
router: Router,
element: ElementRef,
renderer: Renderer2,
cdr: ChangeDetectorRef,
@Optional() link?: RouterLink,
@Optional() linkWithHref?: RouterLinkWithHref
) {
super(router, element, renderer, cdr, link, linkWithHref);
(<any>RcRouterLinkActiveDirective).prototype.isLinkActive = this.isRcLinkActive;
}
/**
* this method sets the link as active regardless of query params
* @param router
* @private
*/
private isRcLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean {
return (link: RouterLink|RouterLinkWithHref) =>{
const linkPath = '/' + link.urlTree.root.children.primary.segments.join('/');
return router.isActive(link.urlTree, this.routerLinkActiveOptions.exact) ||
_.startsWith(router.url, linkPath);
}
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
ngOnDestroy() {
super.ngOnDestroy();
}
ngAfterContentInit() {
super.ngAfterContentInit();
}
}
用法(作为标准的 angular 的 routerLinkActive):
<a ... rcRouterLinkActive="active" ...>Link text</a>