当前位置: 首页 > 知识库问答 >
问题:

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

林昱
2023-03-14

假设我当前所在的页面的URL为user/:id。现在,我从这一页导航到下一页:id/posts。

现在有一种方法,可以检查前面的URL是什么,即,/user/:id

下面是我的路线

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

共有3个答案

曹沛
2023-03-14

创建可注入服务:

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

  //...

}
娄丁雨
2023-03-14

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

previousUrl: string;
constructor(router: Router) {
  router.events
  .pipe(filter(event => event instanceof NavigationEnd))
  .subscribe((event: NavigationEnd) => {
    console.log('prev:', event.url);
    this.previousUrl = event.url;
  });
}

另请参见如何检测角度中的路线变化?

祖利
2023-03-14

也许所有其他答案都是针对角度2的。十、

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

仅使用NavigationEnd,无法获取上一个url。

因为路由器的工作原理是从“NavigationStart”、“Routes认可”、...到“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);
    });
}
    

使用pairwise,您可以查看url的来源和目的地。

“路由识别”是从起点到目标url的更改步骤。

所以过滤它并从中获取以前的url。

最后但并非最不重要的,

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

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

事件。由于筛选器不是事件的一部分,因此筛选器会出现错误,因此请将代码更改为

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);
});
 类似资料:
  • 问题内容: 注意: _这里有很多不同的答案,大多数答案一次或一次都有效。 事实是,当Angular团队更改其Router时,有效的方法已经改变了许多次。最终将 成为 Angular路由器的Router 在Angular应用程序中(我撰写本文时为2.0.0-beta.0版本中的当前版本),如何确定当前活动的路由是什么? 我正在开发一个使用Bootstrap 4的应用程序,并且需要一种在标签中显示其关

  • 注意:这里有很多不同的答案,而且大多数在某个时候都是有效的。事实上,当Angular团队改变其路由器时,工作的方式已经改变了很多次。Router3.0版本将最终成为Angular中的路由器,它打破了许多这些解决方案,但提供了一个非常简单的解决方案。从RC.3开始,首选解决方案是使用,如本答案所示。 在Angular应用程序中(我写这篇文章的时候是2.0.0-Beta.0版本中的最新版本),如何确定

  • 我有一个产品列表页面,显示所有产品的列表。从这个页面有一个链接,可以在我添加新产品的新产品页面上打开。在DB中添加产品后,我想在当前产品新页面关闭后,在上一个产品列表页面中显示新添加的产品。我找不到任何解决方案来将新添加的产品传递回上一页或刷新它以重新加载产品列表。你能帮我做这个吗。

  • 我想回到上一页。 上一页:作业。html当前页面:jobDetail。html 按照说明,我从“@角度/公共”添加了<代码>导入{Location} 至作业详细信息。组成部分ts文件位于顶部,后跟 我在jobDetail中有一个html代码。html,但不知道如何继续。如何正确添加上一个按钮。像我这样的新手没有简单的教程。

  • 我正在使用Laravel 5.3,我这里有一个情况。。。我在第2页,从那里注销,然后重定向到登录页。现在,如果用户再次登录,我试图实现的是重定向回第2页。 当前的情况是,用户将被重定向到defaultAfterLogin页面,这不是我想要的登录流。 注意:登录后的默认页面为"DashBoard"。 如果您第一次进入第2页(不是默认的仪表板页面),并且如果您未登录,您将被重定向到登录页面,那么如果您

  • 我试图保存文件到文件系统使用文件上传功能。因为angular应用程序需要这个文件,而不是后端(rest API-Java),所以我决定将它保存在前端应用程序中,这意味着angular应用程序的资产文件夹中的某个位置。 你知道如何把文件保存在文件夹里吗?谢了。