Angular 5 在单击后退按钮之前阻止或警告用户答案

【问题标题】：Angular 5 prevent or warn user before back button clickAngular 5 在单击后退按钮之前阻止或警告用户
【发布时间】：2018-09-09 23:47:38
【问题描述】：

所以我有一个内置 Angular 的 SPA 应用程序，现在我的问题是当用户在我的应用程序上按下（浏览器）后退按钮时，有时如果数据是在前一页上发送的，它可能会导致错误，有时会出现是刷新时消失的状态。现在有没有办法可以在返回之前警告用户，或者根本不允许用户返回？？

我尝试在我的 index.html 中这样做

<script>
    window.onbeforeunload = function() {
       return "Message";
    };
</script>

但看起来这不再适用于较新的浏览器，我发现了一个类似的问题 here 但它是几年前的问题，我已经尝试了一些解决方案，但没有一个有效..

2018 年处理这种情况的最佳方法是什么？？

谢谢

【问题讨论】：

看看canDeactivate()

标签： javascript angular typescript

【解决方案1】：

您可以使用canActivate 路由保护允许/防止导航到路线，并且可以使用canDeactivate 路线保护允许/防止导航离开路线（请参阅the Angular documentation）。

如果您想阻止用户返回已访问过的页面，请使用canActivate 路由保护。在this stackblitz 中，在返回Login 页面之前会要求确认。作为奖励，它还包含一个用于Home 路由的canDeactivate 路由守卫示例。

这是Login 路由的canActivate 路由守卫的代码：

activate-guard.ts

import { Injectable } from "@angular/core";
import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs";
import { LoginActivateService } from "./login-activate.service";

@Injectable()
export class ActivateGuard implements CanActivate {

  constructor(private loginActivate: LoginActivateService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.loginActivate.canActivateLogin || confirm("Do you really want to go back to login?");
  }

}

app-routing.module.ts

...
imports: [
  RouterModule.forRoot([
    {
      path: 'login', component: LoginViewComponent,
      canActivate: [ActivateGuard]
    },
    {
      path: 'home',
      component: HomeViewComponent,
      canDeactivate: [DeactivateGuard]
    },
    ...
  ])
],

【讨论】：

会触发每个卸载事件还是仅触发后退按钮？？
对于任何离开页面的尝试。我可以做更多的测试，看看是否有办法判断返回按钮是原因。
是的，我真的只想在用户按下后退按钮而不尝试离开应用程序时显示消息
您的意思是要在用户按下返回按钮在应用程序中导航时显示消息？这个答案不适用于这种情况（问题中的代码示例也不会）。
您可以使用路由守卫来防止从路线 (canDeactivate) 或路线 (canActivate) 导航，但我认为他们无法区分使用后退按钮和其他导航手段。如果在离开页面后，您不希望用户返回该页面（有或没有返回按钮），可以使用canActivate 路由保护来完成。

【解决方案2】：

您可以订阅路由器的 events 属性（在 Angular 8 中可用>）它将在每个路由阶段触发一个动作，例如在导航开始、结束、onPopstate 事件……以及浏览器后退按钮事件。

import { Router } from '@angular/router';

constructor(private router: Router) {
   this.router.events.subscribe((event) => {
  if (event instanceof NavigationStart && event.navigationTrigger === 'popstate') {
      // write the logic here
    }
   });
}

【讨论】：