【Angular】 현재 열려 있는 페이지의 url을 취득한다

하고 싶은 일

· 헤더에서 URL에 따라 CSS를 변경하고 싶습니다.
· 페이지를 전환 할 때마다 URL을 얻고 싶습니다.

Router로 이벤트 모니터링

import { NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';

export class HeaderComponent implements OnInit,OnDestroy {
  activeUrl:string;
  urlSubs:Subscription;
  constructor(private router:Router) { }

  async ngOnInit() {
    const navigationEndUrl = 
      await this.router.events
      .pipe(filter<NavigationEnd>(e => e instanceof NavigationEnd));
    this.urlSubs = navigationEndUrl.subscribe(active=>{
      this.activeUrl = active.url;
      console.log(this.activeUrl);
    });
  }

  ngOnDestroy(){
    if(this.urlSubs){
      this.urlSubs.unsubscribe();
  }
}

router.events를 subscribe하면 url에 대한 정보가 여러 가지 흐릅니다.
가득 흐르기 때문에 이번에 원하는 정보가 있는 NavigationEnd의 이벤트 때만 취득하도록 filter로 좁힙니다


url을 가져왔습니다.

나머지는 클래스 바인딩에서 URL을 조건으로하면 실현할 수있었습니다.

   <li class="nav-item">
      <a 
         class="nav-link"
         [class.active]="activeUrl == '/user'"
         routerLink="/user">User
      </a>
   </li>  

페이지를 열 때 한 번만 URL을 얻고 싶을 때의 예

    import { filter, first, map } from 'rxjs/operators';

    // 最初の一回だけurlを取得する
    const navigationEndUrl = 
    await this.router.events
    .pipe(filter<NavigationEnd>(e => e instanceof NavigationEnd))
    .pipe(first())
    .toPromise();