为了账号安全,请及时绑定邮箱和手机立即绑定

如何确定Angular中的上一页URL?

/ 猿问

如何确定Angular中的上一页URL?

炎炎设计 2019-12-26 09:15:20

假设我当前在具有URL的页面上/user/:id。现在,从此页面导航到下一页:id/posts。


现在有一种方法,这样我就可以检查以前的URL是什么/user/:id。


以下是我的路线


export const routes: Routes = [

  { 

    path: 'user/:id', component: UserProfileComponent

  },

  {  

    path: ':id/posts', component: UserPostsComponet 

  }

];


查看完整描述

3 回答

?
FFIVE

您可以订阅路线更改并存储当前事件,以便下次发生时可以使用它


previousUrl: string;

constructor(router: Router) {

  router.events

  .filter(event => event instanceof NavigationEnd)

  .subscribe(e => {

    console.log('prev:', this.previousUrl);

    this.previousUrl = e.url;

  });

}


查看完整回答
反对 回复 2019-12-26
?
MYYA

也许所有其他答案都是针对角度2.X。


现在,它不适用于有角5.X。我正在使用它。


仅使用NavigationEnd,就无法获取以前的URL。


因为路由器的工作方式是从“ NavigationStart”,“ RoutesRecognized”等到“ NavigationEnd”。


您可以检查


    router.events.forEach((event) => {

  console.log(event);

});

但是,即使使用“ NavigationStart”,您仍然无法获得以前的URL。


现在您需要成对使用。


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”是从原始网址到目标网址的更改步骤。


因此,对其进行过滤并从中获取以前的网址。


最后但并非最不重要的,


将此代码放在父组件或更高版本中(例如,app.component.ts)


因为此代码会在完成路由后触发。


更新角度6+

的events.filter,因为过滤器是不活动的一部分,因此修改代码,使错误


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

});


查看完整回答
反对 回复 2019-12-26
?
catspeake

创建可注射服务:


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;

  }    

}

然后在需要的任何地方使用它。要尽快存储当前变量,必须在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);

  }


  //...


}


查看完整回答
反对 回复 2019-12-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信