angular - 如何重定向到 Angular 8 中的上一页

Question

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

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

另外，window.history.back(); 和 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);

注意:自 previousRoute类型为 UrlTree您可以直接使用它来导航 navigateByUrl方法..

关于 history.back(来自文档):

The history.back() method causes the browser to move back one page in the session history. It has the same effect as calling history.go(-1) . If there is no previous page, this method call does nothing

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

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

关于你的最后一个问题:

window object 指的是当前帧，它有一个 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 调用函数例如在 Go Back 按钮上..

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