앵귤러 directive - RouterLinkActive (활성화된 링크 표시하기)

앵귤러 라우터는 활성화된 링크를 표시해 주는 기능을 제공하는데요.

구현하기

1. 앵귤러라우터 추가하기

앵귤러 라이브러리 - Angular Router

★ 모듈이 분리된 경우 라우터를 사용하는 모든 모듈에 라이터모듈을 추가해야 합니다.

2. 활성화된 메뉴표시하기

앵귤러라우터의 RouterLinkActive는 해당링크가 활성화되었을 때 부여된 값을 해당 요소에 클래스로 추가합니다. 해당 클래스에 스타일 추가하면 간단하게 활성화된 메뉴를 시각적으로 표시가 가능하겠죠.

routerLinkActive="active-link"
[routerLinkActive]="['active-link', 'what']" <!-- 복수클래스 추가 -->

<!-- nav.component.html -->

<nav style="width: 100%; display: flex; align-items: center; list-style: none; justify-content: space-around; font-size: 2rem;">
  <h1>
    <a style="text-decoration: none;" routerLink="/" routerLinkActive="active-link">
      Home
    </a>
  </h1>
  <li>
    <a style="cursor:pointer; text-decoration: none;" routerLink="/post" routerLinkActive="active-link">Post</a>
  </li>
  <li>
    <a style="cursor:pointer; text-decoration: none;" routerLink="/about" routerLinkActive="active-link">About</a>
  </li>  
</nav>

/* nav.component.css */

.active-link {
  color: goldenrod;  
}

a {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

다만, 메인경로로 사용된 '/'의 경우 모든 경로에 포함되기 때문에 항상 활성화되는데요. 예를 들어 '/post'라는 A메뉴가 있고 '/post/add'라는 B메뉴가 있으면 A메뉴를 클릭하였을 때 B메뉴는 활성화되지 않지만 B메뉴를 클릭하였을 때는 '/post'와 '/add'를 포함한 경로를 찾기 때문에 A메뉴도 활성화됩니다.

라우터에 경로옵션의 설정을 아래와 같이 변경하면 경로가 정확하게 일치할 때만 활성화하도록 설정가능합니다.

<!-- nav.component.html -->

<nav
  style="width: 100%; display: flex; align-items: center; list-style: none; justify-content: space-around; font-size: 2rem;">
  <h1>
    <a style="text-decoration: none;" routerLink="/" routerLinkActive="active-link"
      [routerLinkActiveOptions]="{exact:true}">
      Home
    </a>
  </h1>
  <li>
    <a style="cursor:pointer; text-decoration: none;" routerLink="/post" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}">Post</a>
  </li>
  <li>
    <a style="cursor:pointer; text-decoration: none;" routerLink="/about" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}">About</a>
  </li>
</nav>

이상으로 앵귤러 라우터 RouterLinkActive 디렉티브를 활용하여 활성화된 링크메뉴에 스타일을 추가하는 방법에 대해 알아보았습니다.

소스코드

https://github.com/jin-co/web-mobile/tree/master/Angular/cheat-sheet/router

GitHub - jin-co/web-mobile

---

참고

Angular - RouterLinkActive

Angular