Angular 2 exact RouterLinkActive including fragments?

Question

When using routerLink and routerLinkActive to apply CSS to a navigation bar, I'd like to also include the fragment information so that links are unique for sections within a homepage.

I've tried using [routerLinkActiveOptions]="{ exact: true }" wihtout any luck.

The relevant part of the navigation bar code is:

  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="inicio">Inicio</a>
  </li>
  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="invierte">Invierte</a>
  </li>
  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="contacto">Contacto</a>
  </li>

The three different URLs the above code visits are:

• /sitio#inicio
• /sitio#invierte
• /sitio#contacto

But when clickin any of them, all of them are marked as being active (because they correspond to the routerLink="/sitio" and the fragment=* information is not included in the check. This results in the navigation bar looking like this when clicking on any of them:

Any ideas on how to do this?

Answer 1

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. :)