Angular team finally merge the PR for that, you can looks at https://github.com/angular/angular/pull/40303 for more detail.
To use it, simply put
<div routerLinkActive="active-link" [routerLinkActiveOptions]="options">
</div>
Where options
will have the either the shape of IsActiveMatchOptions
export declare interface IsActiveMatchOptions {
fragment: 'exact' | 'ignored';
matrixParams: 'exact' | 'subset' | 'ignored';
paths: 'exact' | 'subset';
queryParams: 'exact' | 'subset' | 'ignored';
}
or simply accept a boolean exact
{
exact: boolean
}
I am using routerLink in Angular as below
<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>
So the .active class was added to li tag when the URL looks like
/view/10?offset=0&numberOfItems=100
If the URL was changed either offset
or numberOfItems
to a different value, the .active class will be removed, such as.
/view/10?offset=0&numberOfItems=120
I went through the angular docs and managed to make it works by adding another routerLink but make it hidden as below.
<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>
Seem the above approach is a little hack. Is there any configuration that I can set to make routerLinkActive works when router parameter presents with optional query parameter?
I run into the same issue, but it looks this's by design according this https://github.com/angular/angular/issues/13205
vsavkin is a router creator.
You may find this helpful - extend RouterLinkActive - an item is 'selected' if it contains a string...
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With