[Angular 2+] 브라우저 현재 URL 가져오기

Angular 4 사용하면서 상단의 네비게이션이 현재 주소에 맞게 보여지도록(선택된) 보여야 하는데 현재 보여지는 URL을 가지고 구성하면 되겠다고 생각해서 아래와 같이 URL을 가져와 네비게이션 작업을 했다.

1004lucifer

1. Router.url 사용
 - https://angular.io/api/router/Router#url

2. Router Event를 Subscribe
 - https://angular.io/api/router/Router#events
 - https://angular.io/api/router/Event

get current url


menu.component.html

<div class="naviWrap">
 <ul class="navi">
  <li id="home" routerLink="/home/menu1" class="{{selectedMenu == 'home' ? 'on' : ''}}">홈</li>
  <li id="system" routerLink="/system/menu1" class="{{selectedMenu== 'system' ? 'on' : ''}}">시스템 설정</li>
 </ul>
</div>
<div id="homeSub" class="subnaviWrap" *ngIf="selectedMenu == 'home'">
 <ul class="subnavi">
  <li routerLink="/home/menu1" routerLinkActive="on">메뉴1</li>
  <li class="line">|</li>
  <li routerLink="/home/menu2" routerLinkActive="on">메뉴2</li>
  <li class="line">|</li>
  <li routerLink="/home/menu3" routerLinkActive="on">메뉴3</li>
 </ul>
</div>
<div id="homeSub" class="subnaviWrap" *ngIf="selectedMenu == 'system'">
 <ul class="subnavi">
  <li routerLink="/system/menu1" routerLinkActive="on">메뉴1</li>
  <li class="line">|</li>
  <li routerLink="/system/menu2" routerLinkActive="on">메뉴2</li>
  <li class="line">|</li>
  <li routerLink="/system/menu3" routerLinkActive="on">메뉴3</li>
 </ul>
</div>

1004lucifer


MenuComponent.ts

export class MenuComponent implements OnInit {

    selectedMenu: string;

    constructor(
        private router: Router,
    ) {
        this.selectedMenu = 'home'; // /home/menu1
    }

    ngOnInit() {
  // F5를 눌러 새로고침 시 MenuComponent가 초기화 되니 후 한번 실행
        const currentUrl = this.router.url.split('/');
        if (currentUrl[1]) {
            this.selectedMenu = currentUrl[1];
        }

  // menu.component.html 에서 routerLink 선택하여 메뉴(URL)이동 할 때 마다 실행
        this.router.events.subscribe((event) => {
            if (event instanceof NavigationEnd) {
                this.selectedMenu = event.url.split('/')[1];
            }
        });
    }
}

PS.
- Router Event Subscribe 사용 시 상황에 맞게 사용해야 한다.

(main)AppModule 의 bootstrap에 등록된 Component 에서 Router Event Subscribe 사용할 시 모든 페이지(URL) 이동 시 이벤트가 발생을 하고,
MenuComponent 에서 등록한 Router Event Subscribe 는 해당 컴포넌트에서 발생한 이벤트만 수행이 된다.