การจับคู่ลิงก์ที่ตรงกันทุกประการใน 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>