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

Posted 2023-05-07

【中文标题】覆盖Angular中的浏览器“后退”按钮功能？

【英文标题】：Override browser `back` button functionality in Angular?

【发布时间】：2021-01-02 09:35:17

【问题描述】：

我的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();

【参考方案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();
    );
  

【讨论】：

是的，好像已经不存在了。用这个替换它：window.location.href