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

Question

我有一个组件，用户可以从不同的页面访问该组件。当用户在此组件中点击“确定”按钮时，应将其重定向到先前的页面，即从该页面访问此组件的页面。

我发现 window.history.back(); 和 this.router.navigate('../')。

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

我还想了解 this.location.back() 和 window.history.back() 之间的区别。

- Ramya

Answer 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() 函数可以通过例如 返回 按钮上的 onClick 来调用。

请访问https://angular.io/guide/architecture-components 了解更多详情。

- iLuvLogix

---

谢谢@iLuvLogix!! 我已经实现并理解了区别。 - Ramya

请问您能帮我理解一下 this.location.back() 是什么吗？window.history.back() 和 location.back() 是相同的吗？ - Ramya

@iLuvLogix，在哪个版本的Angular中可以使用getLastSuccessfulNavigation（）函数？我在12版本中找不到它。 - osiris

我也找不到关于 getLastSuccessfulNavigation() 的任何文档。但是这个链接对我有用 - https://dev59.com/Arzpa4cB1Zd3GeqPKmsL#71296528。 - Irving

Answer 2

尝试使用位置对象

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

需要时使用它

this.location.back();

- eldu_gate