Angular 2 exact RouterLinkActive including fragments?
I just thought I would put how I solved it in case someone runs into the same problem: keep track of the current section in the site and use a class binding through a function in the component instead of using routerLinkActive
.
The links in the template become:
<li [class.active]="isSectionActive('inicio')">
<a routerLink="/sitio" fragment="inicio">Inicio</a>
</li>
<li [class.active]="isSectionActive('invierte')">
<a routerLink="/sitio" fragment="invierte">Invierte</a>
</li>
<li [class.active]="isSectionActive('contacto')">
<a routerLink="/sitio" fragment="contacto">Contacto</a>
</li>
Note the lack of use of routerLinkActive
, and the use of class binding [class.active]=isSectionActive('<name-of-section>')
instead.
The code that keeps track of the section we're inside of and decides whether or not to apply the CSS class in the template is:
import { Router, NavigationEnd } from '@angular/router';
// Class signature... {
private activeSiteSection: string;
constructor(
private router: Router,
private sessionService: SessionService
) {
router.events.subscribe((event) => {
if(event instanceof NavigationEnd ) {
this.SiteURLActiveCheck(event);
}
});
}
private SiteURLActiveCheck(event: NavigationEnd): void {
if (event.url.indexOf('#inicio') !== -1) {
this.activeSiteSection = 'inicio';
} else if (event.url.indexOf('#invierte') !== -1) {
this.activeSiteSection = 'invierte';
} else if (event.url.indexOf('#contacto') !== -1) {
this.activeSiteSection = 'contacto';
} else {
this.activeSiteSection = '';
}
}
private isSectionActive(section: string): boolean {
return section === this.activeSiteSection;
}
}
Probably overkill but I rather go this route than modify Angular 2's source. :)
There is an open issue to support that https://github.com/angular/angular/issues/13205
routerLinkActive
is a simple directive. You might be able to create a clone yourself with that extended functionality.