Angular2: как узнать предыдущий URL-адрес страницы при использовании маршрутизации angular2

Я разрабатываю приложение angular2, и я использую маршрутизатор. Я на странице /myapp/signup. после регистрации я просматриваю использование /myapp/login./myapp/login также можно перемещать с моей домашней страницы, которая является /myapp. Итак, теперь, когда пользователи /myapp/login пользователя возвращаются. Это можно сделать, используя location.back(). Но я не хочу возвращаться, когда пользователь приходит из /myapp/signup. Поэтому я должен проверить, поступает ли пользователь из /myapp/signup, и если да, я хочу направить его в другое место. Как узнать предыдущий URL-адрес, чтобы направить пользователя на конкретное состояние на основе этого?

Ответ 1

Оператор pairwise позволяет получить ток вместе с предыдущим значением

обновление

import 'rxjs/add/operator/pairwise';
import 'rxjs/add/operator/filter';
import {Router} from '@angular/router;

export class AppComponent {
    constructor(private router: Router) {
        this.router.events
        .filter(e => e instanceof NavigationEnd)
        .pairwise().subscribe((e) => {
            console.log(e);
        });
    }
}

См. также Как определить изменение маршрута в Angular?

оригинал (супер старый)

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

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

Ответ 2

Да, я бы сделал это следующим образом:

@Injectable() // do not forget to register this class as a provider
export class PreviousRouteRecorder implements CanDeactivate<any> {
  constructor(private router: Router) {
  }
  canDeactivate(component: any): Observable<boolean> | boolean {
    localStorage.setItem('previousRoute', this.router.url);
    return true;
  }
}

export const ROUTES: Routes = [
  {
    path: 'first',
    component: FirstComponent,
    canDeactivate: [PreviousRouteRecorder]},
  {
    path: 'second',
    component: SecondComponent
  }
];

export class SecondComponent implements OnInit {
  ngOnInit(){
    console.log(localStorage.getItem('previousRoute'));
  }
}

Ответ 3

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

стр. 1 → стр. 2 --- > событие навигации инициировано, но событие Observable имеет только 1 значение и, следовательно, попарно не испускает --- > Пользователь не может вернуться на страницу 1

стр. 2 → стр. 3 - > Событие Наблюдаемое теперь имеет 2 элемента и попадает в исходное положение

Интересно, есть ли способ обхода?

Ответ 4

Вы можете сделать это с помощью document.referrer

if(document.referrer !== '/myapp/signup'){
    location.back()
}

Ответ 5

Возможно, вы можете использовать OnActivate phase с помощью метода routerOnActivate, который дает вам доступ к предыдущему URL и текущему.

routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
  console.log(`Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`);
}

Ответ 6

Вы можете установить предыдущий URL-адрес с помощью защитника auth и установить предыдущий URL-адрес в любом из приложений.

canActivate(route: ActivatedRouteSnapshot, snapshot: RouterStateSnapshot) {
                this.commonService.prevRouter = this.router.url;
}

Ответ 7

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

 private currentLocation;
 constructor(private location: Location){
    this.currentLocation = this.location.path();  
   }

ngAfterViewInit() {
 let instance = this;
 this.router.parent.subscribe(() => {            
        if (instance.currentLocation != instance.location.path()) {
             console.log("previous -> "+instance.currentLocation+" != next -> "+instance.location.path());             
        }else{
            console.log("previous -> "+instance.currentLocation+" == next -> "+instance.location.path());
        }
    });
}