Angular アクティブルート判定方法

Angularにおけるアクティブルートの判定について

Angularにおいて、現在のルーティング状態を反映したアクティブルートを判定する方法について、JavaScript、TypeScript、Angularの観点から解説します。

Router State Snapshot

• Angular
  

  <router-outlet (activate)="onRouteActivated($event)"></router-outlet>
  
  onRouteActivated(activatedRoute: ActivatedRoute) {
    const activeRoute: RouteConfig | undefined = activatedRoute.routeConfig;
    console.log(activeRoute); // アクティブルートの情報を出力
  }
  

• TypeScript
  

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    const routeSnapshot: ActivatedRouteSnapshot = this.route.snapshot;
    const activeRoute: RouteConfig | undefined = routeSnapshot.routeConfig;
    console.log(activeRoute); // アクティブルートの情報を出力
  }
  

Router State Observable

Router State Snapshot and Observable

• TypeScript
  

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    const routeSnapshot: ActivatedRouteSnapshot = this.route.snapshot;
    const activeRoute: RouteConfig | undefined = routeSnapshot.routeConfig;
    console.log(activeRoute); // アクティブルートの情報を出力
  
    this.route.paramMap.subscribe((params: ParamMap) => {
      const activeRoute: RouteConfig | undefined = this.route.routeConfig;
      console.log(activeRoute); // アクティブルートの情報を出力
    });
  }
  

Angularにおけるアクティブルート判定方法のコード解説

• Router State Observable
  

  import { Router } from '@angular/router';
  
  constructor(private router: Router) {}
  
  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof Navigat   ionEnd) {
        const activeRoute = this.router.url;
        console.log(activeRoute); // アクティブルートのURLを出力
      }
    });
  }
  

  • router.events：ルーティングイベントを監視するObservableです。
  • NavigationEnd：ナビゲーションが完了したときに発生するイベントです。