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

我正在开发angular2应用程序，我使用路由器。 我在一个页面/myapp/signup中。注册后，我将使用导航到/myapp/login/myapp/登录也可以从我的主页（即/myapp）进行导航。现在，当用户/users/myapp/login返回时。这可以通过使用location.back（）完成。但是当用户来自/myapp/signup时，我不想返回。因此，我应该检查用户是否来自/myapp/signup，如果是，我想将其指向其他地方。

---

我如何知道上一个url，以便根据该url将用户引导到特定状态？

您可以使用

文档。referer

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

---

您可以通过

routerOnActivate

方法利用，该方法允许您访问上一个url和当前url

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

---

pairwise

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

更新

导入'rxjs/add/operator/pairwise'；
导入'rxjs/add/operator/filter'；
从'@angular/Router'导入{Router，NavigationEnd}；
导出类AppComponent{
构造函数（专用路由器：路由器）{
这是路由器事件
.filter（e=>e instanceof NavigationEnd）
.pairwise（）.subscribe（（e）=>{
控制台日志（e）；
});
}
}

另见

原版（超旧版）

注入

路由器

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

构造函数（专用路由器：路由器）{
这是路由器订阅（路由=>{
这个，下一个。。。
这条路。。。
});

是的，我会这样做：

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

@Injectable（）//不要忘记将此类注册为提供程序
导出类PreviousRouteRecorder实现CanDeactivate{
构造函数（专用路由器：路由器）{
}
canDeactivate（组件：任意）：可观察的|布尔值{
localStorage.setItem（'previousRoute'，this.router.url）；
返回true；
}
}
导出常量路由：路由=[
{
路径：'第一'，
组件：第一个组件，
canDeactivate:[PreviousRouterRecorder]}，
{
路径：'第二'，
组件：第二个组件
}
];
导出类SecondComponent实现OnInit{
恩戈尼尼特（）{
log（localStorage.getItem（'previousRoute'）；
}
}

如果用户至少两次未触发导航事件，则使用成对的实现将无法工作，并可能导致小错误

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

第2页->第3页 -->可观测事件现在有2个元素，成对发射

---

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

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

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

---

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

---

测试时不工作。document.referer在所有情况下都不会返回任何内容。在angular2中，可能它不会以这种方式运行？我使用angular2路由器。导航到新状态！啊哈，那么你不是来自另一个url？url没有更改？我来自另一个url。我在localhost/myapp/signup中，导航到/myapp/使用angular Router.navigate方法登录。出于某种原因，无论我从哪里到/myapp/login，文档引用器始终为空。我认为angular应该具有此功能，以了解我来自哪个url。这对我来说很有效，干杯，只需确保导入ComponentInstruction:）

import{路由器，组件指令}来自“angular2/router”；

这是过时的。感谢您的提示！已更新。另请参阅此方法帮助我重新编写非标准面包屑。非常方便！在某些操作后，我不得不转到上一页。这用最少的代码解决了问题。谢谢！如果您需要路由组件上以前的URL，则此方法不起作用aded，这需要两个导航事件，而在同一个组件中。路由器/ActivatedRoute是否不在任何地方存储以前的url？Ps。我现在正在为此使用一个服务，我认为这是一个很好的实践。此外，当我使用上面的更新示例时，

e

的类型是什么？目前正在对其进行如下攻击：

const prev=e[0]const cur=e[1]console.log（'Previous url'+prev.url）console.log（'Previous url'+cur.url）

阅读帮助，不要将问题和评论作为答案发表。如果你想对其他答案发表评论，但你做不到，请先尝试升级。@phoneix也许你应该阅读帮助，了解不是每个人都可以发表评论。收到你的通知都是徒劳的。我只是报告了这个网站的规则。我有e也从1声誉开始，没有评论，所以我知道它是怎样的，这并不免除遵守规则。我有同样的问题，成对运算符没有像@Hou评论的那样工作。有解决方案吗？

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