angular如何实现跳转页面前提示跳转

angular如何实现跳转页面前提示跳转

场景：

有时在编辑过程中，不小心点到后退按钮等，会让之前的编辑全都作废了，因此想通过跳转页面前弹出框提示保存来阻止页面跳转，并提示用户及时保存

解决方案：

可以通过route来实现
在要判断的页面的路由处，利用Route.canDeactivate来获取是否使某个组件无效

const routes: Routes = [

{
    path: 'profile',
    component: ProfileComponent,
    
canDeactivate: [ConfirmOnExitGuard],

    data: {
        auth: [Authority.SYS_ADMIN],
        title: 'profile.profile',
        breadcrumb: {
            label: 'profile.profile',
            icon: 'account_circle'
        }
    },
    resolve: {
        user: UserProfileResolver
    }
}
];

canDeactivate: [ConfirmOnExitGuard],

新建一个文件用来实现ConfirmOnExitGuard类

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from '@angular/router';
import { FormGroup } from '@angular/forms’;
import { DialogService } from '@core/services/dialog.service';
import { isDefined } from '../utils';


export interface HasConfirmForm {
    confirmForm(): {dirty:boolean};
}

export interface HasDirtyFlag {
    isDirty: boolean;
}

@Injectable({
providedIn: 'root'
})
export class ConfirmOnExitGuard implements CanDeactivate<HasConfirmForm & HasDirtyFlag> {

    constructor(private store: Store<AppState>,
    private dialogService: DialogService) { }

    canDeactivate(component: HasConfirmForm & HasDirtyFlag,route: ActivatedRouteSnapshot,state: RouterStateSnapshot) {
        let isDirty = false;
        if (component.confirmForm) {
            const confirmForm = component.confirmForm();
            if (confirmForm) {
                isDirty = confirmForm.dirty;
            }
        } else if (isDefined(component.isDirty)) {
            isDirty = component.isDirty;
        }
        if (isDirty) {
            //如果有脏数据，弹出提示框，并返回用户的选择，确认还是取消离开
            return this.dialogService.confirm(
                ‘未保存的更改’,
                ‘您有未保存的更改。确认要离开此页面吗？’
            );
        }
        //否则返回true，离开页面
        return true;
    }
}

最后，在要判断的页面中，实现confirmForm.dirty

confirmForm() :FormGroup | {dirty:boolean}{
    let obj={
        dirty: this.isEdit // 将该页面的编辑状态赋值给dirty
    }
    return obj;
}

最后看看效果