javascript - 用于返回上一个不同页面的返回位置与具有不同查询参数的页面不同

Question

为了将状态位置更改回 1 步 Angular ，我们可以使用类似 this.location.back(); 的方法。

当系统不使用重定向到相同的 url 但使用不同的查询参数时，效果很好。在这些情况下，后退将返回到同一页面，但具有上一组查询参数。

我的问题是我们如何能够退回到不同的上一页(url)，但不能退回到具有上一组查询参数的同一页面。

Answer 1

首先，您必须始终获取以前的网址，您可以创建一个服务，您始终可以获取当前和以前的网址，如下所示:

import { Injectable } from '@angular/core';
import { Router, RouterEvent, NavigationEnd } from '@angular/router';

@Injectable({
 providedIn: 'root'
})

export class RouterService {

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

在你的组件中:

constructor(private routerService: RouterService) {}

navigateBack() {
  this.previousQueryParams = this.routerService.getPreviousUrl().split('?')[1]; // get query params
  const newUrl = `your new url?${previousQueryParams}`;

  // you can create queryParams object here "queryParamsObject"

  this.router.navigate([`${newUrl}`], queryParamsObject)
}