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

Question

我的 Angular 应用程序中有一个页面使用 stepper。例如，当用户在第 3 步时，他为返回上一步（第 2 步）要做的第一个合乎逻辑的事情是单击 back button。但很明显，他将被重定向到上一页。

因此，我可以在后退点击时将 stepper 设置为上一个，而不是将用户重定向到最后一页，当他在 第 1 步 重定向时他到最后一页。

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

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

这是我试过的方法：

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

Answer 1

你的问题有两点：

如果您想要 disable back 整个应用程序或多个组件的按钮
如果您只需要 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, null, window.location.href);
        this.stepper.previous();
    });
  }
}

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

Override browser `back` button functionality in Angular?

back-button-control

angular

angular-material-stepper