Ακριβής αντιστοίχιση διευθύνσεων στο Angular

Το χαρακτηριστικό routerLinkActive στην πραγματικότητα δεν ελέγχει το URL για ακριβή αντιστοίχιση, αλλά για μερική. Ας υποθέσουμε για παράδειγμα ότι οι σύνδεσμοί μας μοιάζουν με αυτό:

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

Σε αυτήν την περίπτωση, εάν βρισκόμαστε στο url /blog/page/ και οι δύο σύνδεσμοι θα έχουν εφαρμοστεί στυλ.

Για να αναγκάσετε τον έλεγχο των διευθύνσεων των συνδέσμων για ακριβή αντιστοίχιση μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό routerLinkActiveOptions. Δείτε πώς να το χρησιμοποιήσετε:

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>