Как определить предыдущий URL страницы в Angular?

Предположим, что я нахожусь на странице с URL /user/:id. Теперь с этой страницы перейдите на следующую страницу :id/posts.

Теперь есть способ, чтобы я мог проверить, что такое предыдущий URL, т.е. /user/:id.

Ниже приведены мои маршруты

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

Ответ 1

Вы можете подписаться на изменения маршрута и сохранить текущее событие, чтобы вы могли использовать его, когда произойдет следующее.

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?

Ответ 2

Возможно, все остальные ответы для angular 2.X.

Теперь это не работает для angular 5.X. Im работает с ним.

с помощью только NavigationEnd, вы не сможете получить предыдущий url.

потому что Router работает с "NavigationStart", "RoutesRecognized",..., "NavigationEnd".

Вы можете проверить с помощью

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

Но вы не можете получить предыдущий url даже с помощью "NavigationStart".

Теперь вам нужно использовать попарно.

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)

потому что этот код запускается после финишной маршрутизации.

Ответ 3

@GünterZöchbauer также вы можете сохранить его в localstorage, но я не предпочитаю его) лучше сохранить в обслуживании и получить это значение оттуда

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

Ответ 4

Ввести Router и подписаться на события и сохранить их для последующей ссылки

constructor(private _router: Router) {
  this._router.subscribe(route => {
    this.nextRoute ...
    this.prevRoute ...
  });