Tarkka URL-osoitteen täsmäys Angularissa

Attribuutti routerLinkActive ei tarkista URL-osoitetta tarkalleen täsmälleen, vaan osittain. Oletetaan esimerkiksi, että linkkimme näyttävät tältä:

app/app.component.html<nav>
  <a
    routerLink="/blog/"
    routerLinkActive="active"
  >
    Aaaa
  </a>
  <a
    routerLink="/blog/page/"
    routerLinkActive="active"
  >
    Bbbb
  </a>
</nav>

Tässä tapauksessa, jos olemme URL-osoitteessa /blog/page/, molemmat linkit saavat aktiivisen tyylin.

Voit pakottaa linkkien osoitteiden tarkistuksen tarkalleen täsmäykseen käyttämällä attribuuttia routerLinkActiveOptions. Katso, kuinka sitä käytetään:

app/app.component.html<nav>
  <a
    routerLink="/blog/"
    routerLinkActive="active"
    [routerLinkActiveOptions]="{exact:true}">
      Aaaa
  </a>
  <a
    routerLink="/blog/page/"
    routerLinkActive="active"
    [routerLinkActiveOptions]="{exact:true}">
      Aaaa
  </a>
</nav>