Angular에서 활성 링크 스타일링

URL이 주소 표시줄의 주소와 일치하는 링크를 예를 들어 색상과 같은 스타일로 강조 표시하도록 만들 수 있습니다. 이를 위해 Angular에는 특별한 속성 RouterLinkActive가 있습니다.

이것이 어떻게 작동하는지 살펴보겠습니다. 먼저 가져옵니다:

app/app.component.tsimport { RouterLinkActive } from '@angular/router';

데코레이터에 작성합니다:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  ......
})

이제 이 속성을 우리의 링크에 추가합니다:

app/app.component.html<nav>
  <a
    routerLink="/aaaa-component"
    routerLinkActive="active"
  >
    Aaaa Component
  </a>
  <a
    routerLink="/bbbb-component"
    routerLinkActive="active"
  >
    Bbbb Component
  </a>
</nav>

보시다시피, 이 예제에서 속성 값은 active입니다. 이것은 활성 링크에 부여될 CSS 클래스의 이름입니다. 이제 우리는 원하는 대로 스타일을 지정할 수 있습니다:

css.active {
  color: red;
}