Angular 5中canDeactivate守卫结合自定义模态框失效问题

我之前也碰到过类似的异步守卫失效的情况，结合你的场景来看，大概率是守卫的异步逻辑处理不到位，或者组件与守卫的衔接环节出了问题。下面整理了必查的几个关键点和具体修复方案：

1. 先给组件约定统一的接口 #

首先要定义一个接口，让守卫明确知道要调用组件的哪个方法来处理离开确认：

// can-deactivate.interface.ts
export interface CanDeactivateComponent {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

然后你的目标组件必须实现这个接口，把模态框的触发逻辑封装进去：

// your-target.component.ts
import { Component } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { CanDeactivateComponent } from './can-deactivate.interface';

@Component({
  selector: 'app-target',
  templateUrl: './target.component.html'
})
export class TargetComponent implements CanDeactivateComponent {
  // 用于传递用户的模态框选择结果
  private deactivateConfirm$ = new Subject<boolean>();
  // 控制模态框显示/隐藏的变量
  isModalVisible = false;

  canDeactivate(): Observable<boolean> {
    // 触发模态框显示
    this.isModalVisible = true;
    // 返回可观察对象，等待用户操作后发出结果
    return this.deactivateConfirm$.asObservable();
  }

  // 模态框「确定离开」按钮点击事件
  handleConfirmLeave() {
    this.deactivateConfirm$.next(true);
    this.deactivateConfirm$.complete();
    this.isModalVisible = false;
  }

  // 模态框「取消」按钮点击事件
  handleCancelLeave() {
    this.deactivateConfirm$.next(false);
    this.deactivateConfirm$.complete();
    this.isModalVisible = false;
  }
}

2. 检查守卫的实现是否正确 #

守卫必须正确调用组件的canDeactivate方法，并返回对应的异步流，不能直接返回布尔值（否则会同步执行，跳过模态框）：

// can-deactivate.guard.ts
import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { CanDeactivateComponent } from './can-deactivate.interface';

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanDeactivateComponent> {
  canDeactivate(
    component: CanDeactivateComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 核心：必须调用组件的canDeactivate方法并返回其结果
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

3. 确认模块与路由配置无误 #

• 在你的根模块/特性模块中注册守卫：

// app.module.ts
import { NgModule } from '@angular/core';
import { CanDeactivateGuard } from './can-deactivate.guard';

@NgModule({
  providers: [CanDeactivateGuard]
})
export class AppModule { }

• 在路由配置中正确关联守卫：

// app-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { TargetComponent } from './target/target.component';
import { CanDeactivateGuard } from './can-deactivate.guard';

const routes: Routes = [
  {
    path: 'your-page',
    component: TargetComponent,
    canDeactivate: [CanDeactivateGuard] // 这里必须指定守卫
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 排查常见的坑 #

• 不要在canDeactivate方法里直接返回true/false，必须返回Observable或Promise，否则守卫会直接跳转，不会等待用户操作。
• 确保模态框的显示逻辑正常（比如*ngIf="isModalVisible"的变量确实被设置为true）。
• 如果用第三方模态框组件（如ng-bootstrap），可以直接订阅其关闭事件来返回结果，比如：

// 用ng-bootstrap模态框的示例
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component';

// ...
constructor(private modalService: NgbModal) {}

canDeactivate(): Observable<boolean> {
  const modalRef = this.modalService.open(ConfirmModalComponent);
  // 订阅模态框结果，点击确定返回true，取消返回false
  return from(modalRef.result.then(() => true, () => false));
}

内容的提问来源于stack exchange，提问作者AngularM