web-dev-qa-db-ja.com

Angularで前のページのURLを決定する方法は？

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

さて、以前のURLが何であるか、つまり/user/:idを確認できるようにする方法があります。

以下は私のルートです

export const routes: Routes = [
  { 
    path: 'user/:id', component: UserProfileComponent
  },
  {  
    path: ':id/posts', component: UserPostsComponet 
  }
];
angularangular2-routing
56
Chandra Shekhar

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

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

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

43
Günter Zöchbauer

他のすべての答えはangular 2.Xに対するものでしょう。

angular 5.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);
    });
}

Pairwiseを使用すると、URLの元と元を確認できます。

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

フィルタリングして、以前のURLを取得します。

少なくとも最後のではなく、

このコードは親コンポーネント以上を置きます（例、app.component.ts）

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

53
BYUNGJU JIN

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

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);
  }

  //...

}
25
Juliano

Angular 6は、以前のURLを文字列として取得するためのコードを更新しました。

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
            });
    }
13
Franklin Pious

これはangular 6で機能しました：

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

@GünterZöchbauerまた、localstorageに保存することもできますが、私はそれを好まない）サービスに保存し、そこからこの値を取得する方が良い

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