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

Question

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

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

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

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

Answer 1

尝试使用 Location 对象

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

并在需要时使用它

this.location.back();

Answer 2

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

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 对象指的是当前帧，它有一个 history 对象属性 returns window -> 更多信息：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 了解更多详情..

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

How to redirect to the previous page in Angular 8

window-object

angular-routing

angular

angular8