ActivatedRouteのsnapshotプロパティを使用する

Angular で前のページの URL を取得する方法

ActivatedRoute の snapshot プロパティを使用する

ActivatedRoute サービスは、現在のルート情報へのアクセスを提供します。 snapshot プロパティは、現在のルート情報のスナップショットを提供します。 このスナップショットには、前のページの URL を含む、さまざまな情報が含まれています。

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

// コンポーネントクラス
export class MyComponent {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    const previousUrl = this.activatedRoute.snapshot.url[0].path;
    // 前のページの URL を使用して何か処理を行う
  }
}

Location サービスは、ブラウザの履歴と現在の URL を操作するための機能を提供します。

import { Location } from '@angular/common';

// コンポーネントクラス
export class MyComponent {
  constructor(private location: Location) {}

  ngOnInit() {
    const previousUrl = this.location.back();
    // 前のページの URL を使用して何か処理を行う
  }
}

ActivatedRoute サービスの events プロパティは、現在のルートに対するすべてのナビゲーションイベントを Observable として提供します。 この Observable を購読することで、前のページへのナビゲーションイベントを検知し、その URL を取得することができます。

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

// コンポーネントクラス
export class MyComponent {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        const previousUrl = event.urlAfterRedirects;
        // 前のページの URL を使用して何か処理を行う
      }
    });
  }
}

独自のロジックを実装する

上記のいずれの方法も使用せず、独自のロジックを実装して前のページの URL を取得することもできます。 例えば、アプリケーションの履歴を管理する独自のサービスを作成することができます。

<h1>前のページの URL</h1>
<p>{{ previousUrl }}</p>

// コンポーネントファイル
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  previousUrl: string;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.previousUrl = this.activatedRoute.snapshot.url[0].path;
  }
}

このコードを実行すると、コンソールに前のページの URL が出力されます。

上記のサンプルコードは、前のページの URL を取得する最も基本的な方法を示しています。 より複雑な要件に対応するために、上記のコードをカスタマイズすることができます。

例えば、前のページの URL をパラメータとして使用したい場合は、以下のコードのように ActivatedRoute の queryParams プロパティを使用することができます。

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

// コンポーネントクラス
export class MyComponent {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    const previousUrl = this.activatedRoute.snapshot.queryParams['previousUrl'];
    // 前のページの URL を使用して何か処理を行う
  }
}

また、前のページの URL を複数のコンポーネントで共有したい場合は、サービスを使用して共有することができます。

Angular で前のページの URL を取得するには、いくつかの方法があります。 上記の例を参考に、ニーズに合った方法を選択してください。

前のページの URL を取得するその他の方法

window.history オブジェクトは、ブラウザの履歴を操作するための機能を提供します。 以下のコードのように、window.history.back() メソッドを使用して前のページの URL を取得することができます。

const previousUrl = window.history.back();
// 前のページの URL を使用して何か処理を行う

ルーティングモジュールの beforeunload イベントは、ユーザーがページから離れる前に発生します。 以下のコードのように、このイベントを使用して前のページの URL を取得することができます。

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

// ルーティングモジュール
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: MyComponent,
        beforeunload: () => {
          const previousUrl = window.location.href;
          // 前のページの URL を使用して何か処理を行う
        },
      },
    ]),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}