angulr로 네비게이션바를 만들었다.
간단하게 소개하자면 JSON형식으로 담겨져 있는 파일 이름, 아이콘 등등을 불러다 네비게이션 스타일이 적용된 ul li a 태그 안에 데이터를 넣는 방법이다.
a 태그는 [routerLink]로 각 컴포넌트들과 연결 되어있으며, 클릭한 값의 색깔을 변경하고 싶었다. (그니깐 내가 어떤 주소에 있는지 알려주는 !?) 사실 별거 아니라고는 생각했는데,, 꽤 삽질을 했다..
첫번째 생각한 방법은 a 태그 클릭시 함수로 넘어가 컴포넌트 쪽에서 색깔을 변경하는거,, 물론 클릭 시 css 바인딩 해서 색깔이 변하긴 했는데.. 문제는 내가 선택한 값만 변경하는게아니라 모든 a 태그 색상이 다 변해버렸다..
그래서 찾은 방법이 [routerLinkActive] 이다. 해당 [routerLink]로 이동시 class에 해당 값을 넣어준다. 이걸 왜 이제야 알았지 ㅠ
<a [routerLink]="menu_item.url" routerLinkActive="active" lass="waves-effect" mdbWavesEffect>{{menu_item.title}}</a> a.active {
background-color: yellow;
} active라는 클래스를 주었고, 그 클래스에 대한 css를 적용했따
하고보니 정말 별거 아니네 ㅠ 그냥 개념 공부를 더 하는걸루,,
