如何在Angular 2中禁用浏览器后退按钮

Question

我正在使用Angular 2开发一个网站.有没有办法使用Angular 2禁用或触发浏览器后退按钮？

谢谢

Answer 1

不确定这是否已经排序,但仍然发布答案,以供将来参考.要解决这个问题,您基本上需要在app-component中添加一个监听器,并在angular-router上设置一个canDeactivate防护.

// in app.component.ts
import { LocationStrategy } from '@angular/common';

@Component({
  selector: 'app-root'
})
export class AppComponent {
  constructor(
    private location: LocationStrategy
  ) {
    // check if back or forward button is pressed.
    this.location.onPopState(() => {
      // set isBackButtonClicked to true.
      this.someNavigationService.setBackClicked(true);
      return false;
    });
  }
}

// in navigation guard
@Injectable()
export class NavigationGuard implements CanDeactivate<any> {
  constructor(private someNavigationService: SomeNavigationService) {}
  canDeactivate(component: any) {
    // will prevent user from going back
    if (this.someNavigationService.getBackClicked()) {
      this.someNavigationService.setBackClicked(false);
      // push current state again to prevent further attempts.
      history.pushState(null, null, location.href);
      return false;
    }
    return true;
  }
}

Answer 2

这很简单，使用以下代码，此示例代码来自纯 javascript 我已将其转换为 angular 并在我的 2-3 个项目中使用

// Inject LocationStrategy Service into your component
    constructor(
        private locationStrategy: LocationStrategy
      ) { }


// Define a function to handle back button and use anywhere
    preventBackButton() {
        history.pushState(null, null, location.href);
        this.locationStrategy.onPopState(() => {
          history.pushState(null, null, location.href);
        })
      }

您也可以在任何服务中定义preventBackButton并从那里调用它

Answer 3

import { LocationStrategy } from '@angular/common';
constructor( private location: LocationStrategy){  
// preventing back button in browser implemented by "Samba Siva"  
 history.pushState(null, null, window.location.href);  
this.location.onPopState(() => {
  history.pushState(null, null, window.location.href);
});  
}

它在 angular2/4/5 中对我来说 100% 工作正常

Answer 4

我已经尝试了上面提到的所有解决方案，但没有一个对我来说完美。

最后，经过两天的失败尝试，我发现这个 npm 模块可以立即完美地工作。

Github： https: //github.com/Zatikyan/angular-disable-browser-back-button#readme

Answer 5

我使用的代码片段并且适用于所有主要浏览器！

ngOnInit() {
   history.pushState(null, null, location.href);

   this.subscription = fromEvent(window, 'popstate').subscribe(_ => {
      history.pushState(null, null, location.href);
      this.openModal(`You can't make changes or go back at this time.`, 'Okay');
   });
}

ngOnDestroy() {
   this.subscription.unsubscribe();
}

Answer 6

这不是 Angular2 相关的问题。您可以将用户发送回历史记录中。请参阅操作浏览器历史记录，history.go()具体方法：

window.history.go(-1);

但是，我认为没有办法取消或禁用浏览器窗口中按后退按钮时的默认浏览器操作，因为这很容易被滥用。

作为替代方案，您可以在用户尝试离开页面时显示对话框窗口：离开页面之前的 javascript