Angularで前のページのURLを確認する方法は？

Question 1

現在、URLのあるページを表示しているとします/user/:id。このページから次のページに移動します:id/posts。

今の方法は、私はすなわち、前回のURLが何であるかを確認することができそうという、あります/user/:id。

以下は私のルートです

export const routes: Routes = [
  { 
    path: 'user/:id', component: UserProfileComponent
  },
  {  
    path: ':id/posts', component: UserPostsComponet 
  }
];

Question 2

ルート変更をサブスクライブして現在のイベントを保存し、次のイベントが発生したときに使用できるようにすることができます

previousUrl: string;
constructor(router: Router) {
  router.events
  .pipe(filter(event => event instanceof NavigationEnd))
  .subscribe((event: NavigationEnd) => {
    console.log('prev:', event.url);
    this.previousUrl = event.url;
  });
}

Angularでルート変更を検出する方法も参照してください。

Question 3

たぶん、他のすべての答えは角度2.Xに対するものです。

現在、Angular5.Xでは機能しません。私はそれを使っています。

NavigationEndのみでは、以前のURLを取得できません。

ルーターは「NavigationStart」、「RoutesRecognized」、...から「NavigationEnd」まで機能するためです。

で確認できます

    router.events.forEach((event) => {
  console.log(event);
});

ただし、「NavigationStart」を使用しても以前のURLを取得することはできません。

次に、ペアワイズを使用する必要があります。

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/pairwise';

constructor(private router: Router) {
  this.router.events
    .filter(e => e instanceof RoutesRecognized)
    .pairwise()
    .subscribe((event: any[]) => {
      console.log(event[0].urlAfterRedirects);
    });
}

ペアワイズを使用すると、URLの送信元と送信先を確認できます。

「RoutesRecognized」は、起点からターゲットURLへの変更ステップです。

だからそれをフィルタリングし、それから前のURLを取得します。

最後だが大事なことは、

このコードを親コンポーネント以上（例：app.component.ts）に配置します

このコードはルーティングの終了後に起動するためです。

角度6+を更新

events.filterフィルタはイベントの一部ではないため、はエラーになります。コードを次のように変更してください。

import { filter, pairwise } from 'rxjs/operators';

this.router.events
.pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
.subscribe((events: RoutesRecognized[]) => {
  console.log('previous url', events[0].urlAfterRedirects);
  console.log('current url', events[1].urlAfterRedirects);
});

Question 4

注射可能なサービスを作成します。

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

 /** A router wrapper, adding extra functions. */
@Injectable()
export class RouterExtService {

  private previousUrl: string = undefined;
  private currentUrl: string = undefined;

  constructor(private router : Router) {
    this.currentUrl = this.router.url;
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {        
        this.previousUrl = this.currentUrl;
        this.currentUrl = event.url;
      };
    });
  }

  public getPreviousUrl(){
    return this.previousUrl;
  }    
}

次に、必要な場所で使用します。現在の変数をできるだけ早く保存するには、AppModuleでサービスを使用する必要があります。

// AppModule
export class AppModule {
  constructor(private routerExtService: RouterExtService){}

  //...

}

// Using in SomeComponent
export class SomeComponent implements OnInit {

  constructor(private routerExtService: RouterExtService, private location: Location) { } 

  public back(): void {
    this.location.back();
  }

  //Strange name, but it makes sense. Behind the scenes, we are pushing to history the previous url
  public goToPrevious(): void {
    let previous = this.routerExtService.getPreviousUrl();

    if(previous)
      this.routerExtService.router.navigateByUrl(previous);
  }

  //...

}

Question 5

以前のURLを文字列として取得するためのAngular6の更新されたコード。

import { Router, RoutesRecognized } from '@angular/router';
import { filter, pairwise } from 'rxjs/operators';


export class AppComponent implements OnInit {

    constructor (
        public router: Router
    ) {
    }

    ngOnInit() {
        this.router.events
            .pipe(filter((e: any) => e instanceof RoutesRecognized),
                pairwise()
            ).subscribe((e: any) => {
                console.log(e[0].urlAfterRedirects); // previous url
            });
    }

Question 6

これは、Angular> = 6.xバージョンで機能しました：

this.router.events
            .subscribe((event) => {
              if (event instanceof NavigationStart) {
                window.localStorage.setItem('previousUrl', this.router.url);
              }
            });

Question 7

2019バージョンのAngular8＆rxjs 6

他の素晴らしいソリューションに基づいたソリューションを共有したいと思います。

まず、ルートの変更をリッスンするサービスを作成し、最後の前のルートをBehavior Subjectに保存します。次に、コンストラクターのメインapp.componentでこのサービスを提供し、このサービスを使用して、必要なときに必要な前のルートを取得します。

ユースケース：ユーザーを広告ページにリダイレクトしてから、ユーザーの元の場所に自動リダイレクトするため、最後の前のルートが必要です。

// service : route-events.service.ts

import { Injectable } from '@angular/core';
import { Router, RoutesRecognized } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter, pairwise } from 'rxjs/operators';
import { Location } from '@angular/common';

@Injectable()
export class RouteEventsService {

    // save the previous route
  public previousRoutePath = new BehaviorSubject<string>('');

  constructor(
    private router: Router,
    private location: Location
  ) {

    // ..initial prvious route will be the current path for now
    this.previousRoutePath.next(this.location.path());


    // on every route change take the two events of two routes changed(using pairwise)
    // and save the old one in a behavious subject to access it in another component
    // we can use if another component like intro-advertise need the previous route
    // because he need to redirect the user to where he did came from.
    this.router.events.pipe(
      filter(e => e instanceof RoutesRecognized),
      pairwise(),
        )
    .subscribe((event: any[]) => {
        this.previousRoutePath.next(event[0].urlAfterRedirects);
    });

  }
}

app.moduleでサービスを提供します

  providers: [
    ....
    RouteEventsService,
    ....
  ]

app.componentに挿入します

  constructor(
    private routeEventsService: RouteEventsService
  )

最後に、保存した前のルートを必要なコンポーネントで使用します

  onSkipHandler(){
    // navigate the user to where he did came from
    this.router.navigate([this.routeEventsService.previousRoutePath.value]);
  }

Question 8

Angular8を使用していますしていますが、@ franklin-piousの回答で問題が解決します。私の場合、サブスクライブ内の前のURLを取得すると、ビュー内のデータに添付されている場合にいくつかの副作用が発生します。

私が使用した回避策は、ルートナビゲーションのオプションパラメータとして前のURLを送信することでした。

this.router.navigate(['/my-previous-route', {previousUrl: 'my-current-route'}])

そして、コンポーネントでこの値を取得するには：

this.route.snapshot.paramMap.get('previousUrl')

this.routerとthis.routeは、各コンポーネントのコンストラクター内に挿入され、@ angular / routerメンバーとしてインポートされます。

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

Question 9

ANGULAR7 +の場合

実際、Angular 7.2以降、以前のURLを保存するためのサービスを使用する必要はありません。ログインページにリンクする前に、stateオブジェクトを使用して最後のURLを設定することができます。ログインシナリオの例を次に示します。

@Component({ ... })
class SomePageComponent {
  constructor(private router: Router) {}

  checkLogin() {
    if (!this.auth.loggedIn()) {
      this.router.navigate(['login'], { state: { redirect: this.router.url } });
    }
  }
}

@Component({...})
class LoginComponent {
  constructor(private router: Router) {}

  backToPreviousPage() {
    const { redirect } = window.history.state;

    this.router.navigateByUrl(redirect || '/homepage');
  }
}

--------------------------------

さらに、テンプレートでデータを渡すこともできます。

@Component({
  template: '<a routerLink="/some-route" [state]="{ redirect: router.url}">Go to some route</a>'
})
class SomePageComponent {
  constructor(public router: Router) {}
}

Question 10

@GünterZöchbauerもローカルストレージに保存できますが、私はそれを好みません）サービスに保存してそこからこの値を取得する方が良いです

 constructor(
        private router: Router
      ) {
        this.router.events
          .subscribe((event) => {
            if (event instanceof NavigationEnd) {
              localStorage.setItem('previousUrl', event.url);
            }
          });
      }

Question 11

ここで説明されているように、ロケーションを使用できます。

リンクが新しいタブで開いた場合の私のコードは次のとおりです

navBack() {
    let cur_path = this.location.path();
    this.location.back();
    if (cur_path === this.location.path())
     this.router.navigate(['/default-route']);    
  }

必要な輸入品

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

Question 12

previousNavigationオブジェクトを使用することで非常に簡単です：

this.router.events
  .pipe(
    filter(e => e instanceof NavigationEnd && this.router.getCurrentNavigation().previousNavigation),
    map(() => this.router.getCurrentNavigation().previousNavigation.finalUrl.toString()),
  )
  .subscribe(previousUrl => {});

Question 13

ガード内の前のURLにアクセスするのに苦労しました。
カスタムソリューションを実装せずに、これは私のために働いています。

public constructor(private readonly router: Router) {
};

public ngOnInit() {
   this.router.getCurrentNavigation().previousNavigation.initialUrl.toString();
}

最初のURLは前のURLページになります。

Question 14

上記のすべての回答は、URLを複数回ロードします。ユーザーが他のコンポーネントにもアクセスした場合、これらのコードが読み込まれます。

とても使いやすい、サービス作成の概念。https://community.wia.io/d/22-access-the-previous-route-in-your-angular-5-app

これは、Angularのすべてのバージョンでうまく機能します。（app.moduleファイルのproviders配列に必ず追加してください！）

Question 15

rxjxのペアワイズを使用すると、これを簡単に実現できます。import {filter、pairwise} from'rxjs / operator ';

previousUrl: string;
constructor(router: Router) {
router.events
  .pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
  .subscribe((events: RoutesRecognized[]) => {
  console.log('previous url', events[0].urlAfterRedirects);
  console.log('current url', events[1].urlAfterRedirects);
  this.previousUrl = events[0].urlAfterRedirects;
});

}

Question 16

前のページに戻りたいと思ったときも同様の問題がありました。解決策は想像以上に簡単でした。

<button [routerLink]="['../']">
   Back
</button>

そして、それは親URLに戻ります。私はそれが誰かを助けることを願っています;）