如何在 Angular 8 中重定向到上一页答案

【问题标题】：How to redirect to the previous page in Angular 8如何在 Angular 8 中重定向到上一页
【发布时间】：2021-02-12 21:16:46
【问题描述】：

我有一个组件，用户可以从各个页面访问它。当用户单击确定时在这个组件中的按钮，他应该被重定向到上一页，即。他所在的页面来到这个组件。

我遇到了 window.history.back(); 和 this.router.navigate('../')。

另外，window.history.back(); 之间有什么区别？和 this.router.navigate('../')

我也想了解this.location.back()和window.history.back()有什么区别。

【问题讨论】：

标签： angular angular8 angular-routing window-object

【解决方案1】：

要获得最后一次成功的导航并导航到它，您可以使用：

const lastNav = router.getLastSuccessfulNavigation();

const previousRoute = lastNav.previousNavigation; 

router.navigateByUrl(previousRoute);

注意：由于previousRoute 是UrlTree 类型，您可以使用navigateByUrl 方法直接使用它进行导航..

关于 history.back（来自文档）：

history.back() 方法使浏览器在会话历史记录中后退一页。它与调用 history.go(-1) 具有相同的效果。如果没有上一页，这个方法调用什么都不做

而this.router.navigate( '../' ) 将使用<a [routerLink]="['../', 'foo', 'bar']">Go Up</a> 引导您进入更高级别的导航

所以区别在于window.history.back(); 会带你回去，this.router.navigate( '../' ) 会带你上楼..

关于你的最后一个问题：

window 对象引用当前帧，它有一个 history 对象属性，它返回窗口的历史对象 -> 更多信息：https://www.w3schools.com/jsref/obj_history.asp

虽然 location 应该从 @angular/common 导入并在如下构造函数中使用：

import {Location} from '@angular/common';

@Component({
  // component's declarations here
})
class SomeComponent {

  constructor(private location: Location) 
  {}

  goBack() {
    this.location.back();
  }
}

然后，goBack() 函数可以通过 Go Back 按钮上的 onClick 调用..

查看https://angular.io/guide/architecture-components了解更多详情..

【讨论】：

谢谢@iLuvLogix ！！我实施并理解了其中的区别。
你能帮我理解一下 this.location.back() 是什么吗？ window.history.back() 和 location.back() 一样吗？
@iLuvLogix，路由器中的 getLastSuccessfulNavigation() 在什么角度版本中可用？我在 12 上找不到它。

【解决方案2】：

尝试使用 Location 对象

import {Location} from '@angular/common'; 
constructor(private location: Location){}

并在需要时使用它

this.location.back();

【讨论】：