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

Question

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

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

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

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

Answer 1

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

const lastNav = router.getLastSuccessfulNavigation();

const previousRoute = lastNav.previousNavigation; 

router.navigateByUrl(previousRoute);

注意：由于previousRouteis 类型，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对象指的是当前帧，它有一个历史对象属性，该属性返回窗口的历史对象 - >更多信息：https ://www.w3schools.com/jsref/obj_history.asp

Whilelocation应该从@angular/common构造函数中导入并在其中使用，例如：

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

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

  constructor(private location: Location) 
  {}

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

例如，该函数可以通过按钮goBack()调用。onClickGo Back

请查看https://angular.io/guide/architecture-components了解更多详细信息。