Angular에서 활성 링크 스타일링

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

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

import { RouterLinkActive } from '@angular/router';

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

@Component({
	......
	imports: [RouterOutlet, RouterLink, RouterLinkActive],
	......
})

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

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

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

.active {
	color: red;
}

프로젝트에서 활성 링크를 스타일링하세요.