覆盖Angular中的浏览器“后退”按钮功能吗？

问题描述

我的Angular应用中有一个页面，其中使用了stepper。例如，当用户处于第3步时，他将要返回上一步（第2步）的第一件事就是单击back button。但显然，他将被重定向到上一页。

因此，我可以将stepper设置为上一次单击后单击，而不是将用户重定向到最后一页，并且当他处于第1步时，将其重定向到最后一页。

我试图通过强制转换@HostListener（将步进器设置为上一步的函数）来使用this.stepper.prevIoUs();，但是当操作为catched时，该函数不会执行，并且页面仍会重定向回来。

那么如何防止单击后退按钮时重定向页面？

这是我尝试过的：

@HostListener( 'window: popstate',['$event'])
onPopState(event: Event): void {
  event.preventDefault();
  console.log("BACK pressed")
  this.stepper.prevIoUs();
}

解决方法

您的问题有两点：

1. 如果您想为整个应用程序或多个组件使用disable back按钮
2. 如果您只想为特定组件使用disable back按钮

对于＃1要求，我认为更好的方法是实现Guard并将其应用于所需的routes。但是，如果需要使用＃2，则使用onPopState()看起来还可以，但是似乎您错过了使用LocationStrategy 和history.pushState()的情况，因此，请尝试以下操作：

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

@Component({
  selector: 'app-root'
})
export class AppComponent {
  constructor(
    private location: LocationStrategy
  ) {
    history.pushState(null,null,window.location.href);
    // check if back or forward button is pressed.
    this.location.onPopState(() => {
        history.pushState(null,window.location.href);
        this.stepper.previous();
    });
  }
}