【Angular】現在開いているページのurlを取得する

6414 ワード
Angular Angular テキストリンク

やりたいこと

・ヘッダーで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();