【Angular】 현재 열려 있는 페이지의 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();
  }
}

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

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

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