routerLink

참조

가장 일반적인 예이다.

<a routerLink="/bbs/notice">공지사항</a>
<a [routerLink]="'/bbs/notice">공지사항</a>

routerLink vs href

두개의 가장 큰 차이점은 무엇일까 ?

• routerLink : 라우터컨텐츠만 렌드링하여 처리한다. 흔히 웹에서 클릭시 로딩시간동안 깜빡깜빡하는 현상없이 자연스럽게 페이지 전환이 이루어진다.
• href: 웹에서 링크를 새로 여는 것과 마찬가지로 모든 것이 리셑되면 열린다.

<a routerLink="/bbs/notice">공지사항</a>
<a href="/bbs/notice">공지사항</a>

routerLinkActive

routerLink 가 active되면(routerLink 가 현재 url이면) on 클라스를 출력한다

<a routerLink="/bbs/notice" routerLinkActive="on">공지사항</a>

routerLinkActiveOptions

exact

url이 정확히 일치할때만 routerLinkActive 가 활성화됨

<a routerLink="/bbs/notice" routerLinkActive="on">공지사항</a>
<a routerLink="/bbs/notice/kk" routerLinkActive="on">공지사항</a> // 이곳에 접근할때도 위의 /bbs/notice 가활성화 됨

<a routerLink="/bbs/notice" routerLinkActive="on" [routerLinkActiveOptions]="{ exact: true }">공지사항</a>
<a routerLink="/bbs/notice/kk" routerLinkActive="on">공지사항</a> // 이곳에 접근할때도 위의 /bbs/notice 가 활성화 되지 않음

그룹(multi) 처리

서브 메뉴의 path 가 각각 다르지만 서브메뉴에 접근하였을 경우에도 routerLinkActive 가 활성화 되게 처리할때

<div class="accordion-collapse collapse"  [ngClass]="{'show': mypageActive1.isActive || mypageActive2.isActive}">
  <a mat-button color="primary" routerLink="/mypage"  routerLinkActive="on" #mypageActive1="routerLinkActive">
  </a>

  <a mat-button color="primary" routerLink="/history"  routerLinkActive="on" #mypageActive2="routerLinkActive">
  </a>
</div>