angular - 覆盖 Angular 中的浏览器 `back` 按钮功能？

Question

我的 Angular 中有一个页面使用 stepper 的应用程序.例如，当用户在第 3 步时，他返回上一步(第 2 步)的第一个合乎逻辑的事情是单击 back button .但很明显，他会被重定向到上一页。
所以，我可以设置 stepper回到上一个点击而不是将用户重定向到最后一页，当他在 上时步骤 1 将他重定向到最后一页。
我试图使用 @HostListener通过类型转换 this.stepper.previous(); (将步进器设置为上一个的功能)但 Action 是 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();
    });
  }
}