Angular2：如何在使用angular2路由时找出上一页的URL

Question

我正在开发一个angular2应用程序，我使用路由器。我在页面/ myapp /注册。注册后，我将使用导航到/ myapp / login。 / myapp / login也可以从我的主页/ myapp导航。所以现在，当用户users / myapp / login我回去了。这可以通过使用location.back（）来完成。但是当用户来自/ myapp / signup时，我不想回去。所以我应该检查用户是否来自/ myapp / signup，如果是，我想将它指向其他地方。我如何才能知道以前的网址，以便根据具体情况将用户定向到特定状态？

Answer 1

pairwise运算符允许将当前值与前一个值一起获取

更新

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

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

另见How to detect a route change in Angular?

原创（超级老）

注入Router并订阅事件并存储它们以供以后参考

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

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

Answer 3

Angular 6更新了将前一个url作为字符串的代码。

import { Component, OnInit } from '@angular/core';
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
            });
    }

Answer 4

你可以用document.referrer做到这一点

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

Answer 5

你可以利用OnActivate phase方法利用routerOnActivate，它可以访问前一个网址和当前网址。

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

Answer 6

如果用户至少两次不触发导航事件并且可能导致小错误，则使用成对的实现将不起作用。

第1页 - >第2页--->导航事件已触发，但事件Observable只有1个值，因此成对不会发出--->用户无法返回到第1页

第2页 - >第3页 - >事件Observable现在有2个元素和成对发射

我想知道是否有解决方法？

Answer 7

您可以使用auth guard设置上一个url，并在应用程序的任何一个中设置前一个url。

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

Answer 8

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