Bagaimana cara menentukan URL halaman sebelumnya di Angular?

Misalkan saya saat ini berada di halaman yang memiliki URL /user/:id. Sekarang dari halaman ini saya menavigasi ke halaman berikutnya :id/posts.

Sekarang apakah ada cara, sehingga saya dapat memeriksa apa URL sebelumnya, yaitu /user/:id.

Berikut adalah rute saya

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

Anda dapat berlangganan perubahan rute dan menyimpan acara saat ini sehingga Anda dapat menggunakannya saat acara berikutnya

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

Lihat juga Bagaimana mendeteksi perubahan rute di Angular?

Mungkin semua jawaban lainnya adalah untuk sudut 2.X.

Sekarang tidak berfungsi untuk sudut 5.X. Saya sedang mengerjakannya.

hanya dengan NavigationEnd, Anda tidak bisa mendapatkan url sebelumnya.

karena Router bekerja dari "NavigationStart", "RoutesRecognized", ..., hingga "NavigationEnd".

Anda bisa mengeceknya dengan

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

Tapi tetap saja Anda tidak bisa mendapatkan url sebelumnya bahkan dengan "NavigationStart".

Sekarang Anda perlu menggunakan berpasangan.

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

Dengan berpasangan, Anda dapat melihat asal dan tujuan url.

"RoutesRecognized" adalah langkah perubahan dari asal ke url target.

jadi filter dan dapatkan url sebelumnya darinya.

Terakhir tapi bukan yang akhir,

letakkan kode ini di komponen induk atau yang lebih tinggi (mis., app.component.ts)

karena kode ini aktif setelah perutean selesai.

Perbarui sudut 6+

The events.filtermemberikan kesalahan karena filter bukan bagian dari acara, sehingga mengubah kode untuk

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

Buat layanan injeksi:

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

Kemudian gunakan di mana pun Anda membutuhkannya. Untuk menyimpan variabel saat ini sesegera mungkin, Anda perlu menggunakan layanan di 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);
  }

  //...

}

Angular 6 memperbarui kode untuk mendapatkan url sebelumnya sebagai string.

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

Ini bekerja untuk saya dalam versi angular> = 6.x:

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

Saya menggunakan Angular 8 dan jawaban dari @ franklin-pious memecahkan masalah. Dalam kasus saya, dapatkan url sebelumnya di dalam langganan menyebabkan beberapa efek samping jika dilampirkan dengan beberapa data dalam tampilan.

Solusi yang saya gunakan adalah mengirim url sebelumnya sebagai parameter opsional dalam navigasi rute.

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

Dan untuk mendapatkan nilai ini di komponen:

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

this.router dan this.route dimasukkan ke dalam konstruktor setiap komponen dan diimpor sebagai anggota @ angular / router.

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

Angular 8 & rxjs 6 pada versi 2019

Saya ingin berbagi solusi berdasarkan solusi hebat lainnya.

Pertama-tama buat layanan untuk mendengarkan perubahan rute dan simpan rute terakhir sebelumnya di Subjek Perilaku, lalu sediakan layanan ini di app.component utama di konstruktor lalu gunakan layanan ini untuk mendapatkan rute sebelumnya yang Anda inginkan kapan pun Anda mau.

kasus penggunaan: Anda ingin mengarahkan pengguna ke halaman beriklan kemudian secara otomatis mengarahkannya ke tempat asalnya sehingga Anda memerlukan rute terakhir sebelumnya untuk melakukannya.

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

  }
}

menyediakan layanan di app.module

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

Masukkan di app.component

  constructor(
    private routeEventsService: RouteEventsService
  )

terakhir gunakan rute sebelumnya yang disimpan di komponen yang Anda inginkan

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

UNTUK ANGULAR 7+

Sebenarnya sejak Angular 7.2 tidak perlu menggunakan layanan untuk menyimpan url sebelumnya. Anda bisa menggunakan objek status untuk menyetel url terakhir sebelum menautkan ke halaman login. Berikut adalah contoh skenario login.

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

Selain itu, Anda juga bisa meneruskan data di template:

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

@ GünterZöchbauer juga Anda dapat menyimpannya di penyimpanan lokal tetapi saya tidak lebih suka) lebih baik menyimpan dalam layanan dan mendapatkan nilai ini dari sana

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

Anda dapat menggunakan Lokasi seperti yang disebutkan di sini .

Ini kode saya jika tautan dibuka di tab baru

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

Impor yang dibutuhkan

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

Cukup sederhana dengan menggunakan previousNavigationobjek:

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

Saya kesulitan mengakses url sebelumnya di dalam penjaga.
Tanpa menerapkan solusi khusus, yang ini berfungsi untuk saya.

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

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

Url awal akan menjadi halaman url sebelumnya.

Semua JAWABAN Di Atas akan memuat URL beberapa kali. Jika pengguna mengunjungi komponen lain juga, kode ini akan dimuat.

Jadi lebih baik untuk digunakan, Konsep pembuatan layanan. https://community.wia.io/d/22-access-the-previous-route-in-your-angular-5-app

Ini akan bekerja dengan baik di semua versi Angular. (pastikan untuk menambahkannya ke array provider di file app.module Anda!)

Menggunakan berpasangan dari rxjx Anda dapat mencapai ini dengan lebih mudah. impor {filter, pairwise} dari '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;
});

}

Saya mengalami masalah serupa ketika saya ingin kembali ke halaman sebelumnya. Solusi lebih mudah dari yang bisa saya bayangkan.

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

Dan itu kembali ke url induk. Saya berharap ini akan membantu seseorang;)