[Angular]遷移元urlのpathを取得！ActivatedRouteについて

Angularアプリケーションにおいて、現在のページがどのURLから遷移されたかを知りたいことがあります。

本記事では、Angularで遷移元のURLを取得する方法について解説します。

これにより、ユーザーの操作履歴を追跡したり、特定の条件での遷移元による挙動の制御が可能になります。

ActivatedRouteでpathを取得する
ルーターイベントで遷移元urlの取得する
まとめ

SPONSORLYNC

ActivatedRouteでpathを取得する

Angularでは、ActivatedRouteサービスを使用して現在のルートに関する情報を取得できます。

以下は、ActivatedRouteを使って遷移元のURLを取得する基本的なコード例です。

import { ActivatedRoute } from '@angular/router';

export class YourComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 遷移元のURLを取得
    const sourceUrl = this.route.snapshot.queryParams['returnUrl'];
    console.log('遷移元のURL:', sourceUrl);
  }
}

記の例では、ActivatedRouteのsnapshotプロパティを使用して、

クエリパラメータとして渡されたreturnUrlを取得しています。

これにより、遷移元のURLを把握することができます。

ルーターイベントで遷移元urlの取得する

もし、リアルタイムで遷移元のURLを取得したい場合は、ルーターイベントを取得する方法もあります。

import { Router, NavigationEnd } from '@angular/router';

export class YourComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        // 遷移元のURLを取得
        const sourceUrl = this.router.url;
        console.log('遷移元のURL:', sourceUrl);
      }
    });
  }
}

上記の例では、Routerサービスの

NavigationEndイベントが発生した時に現在のURLを取得しています。

これにより、遷移元のURLをリアルタイムに監視することができます。

まとめ

Angularで遷移元のURLを取得する方法について、

ActivatedRouteを使用する方法とルーターイベントを購読する方法を解説しました。

プロジェクトの要件に応じて適切な方法を選択し、柔軟で効果的な開発を行いましょう。