如何在 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");
})
}
添加candeactivate守卫
可以停用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();
}
}
在你的路由设置中
const route: Route = [
{path: '', component: AppComponent, canDeactivate: [CanDeactivateGuard]}
]
在providers数组中的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');
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)