Angular路由守衛 canDeactivate

時間 2019-11-11

標籤 angular 路由守衛 candeactivate 欄目 AngularJS 简体版

原文原文鏈接

目的

離開頁面時，作出邏輯判斷
以ng-alain的項目爲基礎作演示
效果如圖：
git

關鍵代碼

定義一個CanDeactivateGuardServicegithub

export class CanDeactivateGuardService implements CanDeactivate<CanDeactivateComponent> {

    canDeactivate(component: CanDeactivateComponent,
                  route: ActivatedRouteSnapshot,
                  state: RouterStateSnapshot): Observable<boolean> | boolean {
        return component.leaveTip();
    }
}

在component中完成leaveTip方法typescript

leaveTip() {
  return Observable.create((observer) => {
    if(!this.isSave){
      this.modalService.confirm({
        nzTitle: '頁面離開提示',
        nzContent: '數據還沒有保存，是否離開該頁面？',
        nzOnOk: async () => {
            observer.next(true);
        },
        nzOnCancel: () => {
            observer.next(false);
        }
      });
    }
    else{
      observer.next(true);
    }
  });
}

設置ng-alain的ReuseTabMatchMode，排除can-deactivate這個目標路由app

this.reuseTabService.mode = ReuseTabMatchMode.URL;
const excludes = new Array<RegExp>();
excludes.push(new RegExp('/can-deactivate'));
this.reuseTabService.excludes = excludes;