Angular 2 exact RouterLinkActive including fragments?
<p>When using <code>routerLink</code> and <code>routerLinkActive</code> to apply CSS to a navigation bar, I'd like to also include the <code>fragment</code> information so that links are unique for sections within a homepage.</p>

<p>I've tried using <code>[routerLinkActiveOptions]="{ exact: true }"</code> wihtout any luck.</p>

<p>The relevant part of the navigation bar code is:</p>

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

<p>The three different URLs the above code visits are:</p>

<ul>
<li><code>/sitio#inicio</code></li>
<li><code>/sitio#invierte</code></li>
<li><code>/sitio#contacto</code></li>
</ul>

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

<p><a href="https://i.stack.imgur.com/bOWE7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bOWE7.png" alt="enter image description here"></a></p>

<p>Any ideas on how to do this?</p>