如何在angular 4中单击浏览器后退按钮时提醒用户？

如何在angular 4中单击浏览器后退按钮时提醒用户

onpopstate

即使在页面第一次加载时也会被调用

import {  PlatformLocation } from '@angular/common';

    constructor( private platformLocation: PlatformLocation) {
        platformLocation.onPopState(() => {
          console.log("onPopState called");
          window.alert("your data will be lost");
        })
    }

---

您可以在组件内部使用

ngondestory

。当组件将被销毁时，它将被自动调用，然后您可以警告任何警告。

添加candeactivate防护

can-guard.service.ts

import {Observable} from 'rxjs';
import {CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate, 
                currentRoute: ActivatedRouteSnapshot,
                currentState: RouterStateSnapshot,
                nextState?: RouterStateSnapshot
                ) : Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate();
  }
}

在提供商阵列中提供您的app.module，您可以停用其中的防护

考虑以下组件，其中我有变量来检查保存的更改

export class AppComponent implements CanComponentDeactivate {
   changesSaved = false;
   onUpdateServer() {
     this.changesSaved = true;
   }
   canDeactivate() {
      if(this.changesSaved) {
        return true;
      } else {
        return confirm('Do you want to discard changes');
      }
   }
}

---

您得到的错误是什么？canDeactivate是一种处理浏览器回溯的角度方法。请检查我下面的解决方案是否有效。谢谢@shreykeriwalhi@ranjith，如果该解决方案有用，请向上投票

export class AppComponent implements CanComponentDeactivate {
   changesSaved = false;
   onUpdateServer() {
     this.changesSaved = true;
   }
   canDeactivate() {
      if(this.changesSaved) {
        return true;
      } else {
        return confirm('Do you want to discard changes');
      }
   }
}