Angular中如何从Observable订阅返回布尔值给canDeactivate函数

这个问题的核心是你当前的openConfirmDialog()返回的是Subscription（subscribe()方法的返回值），但canDeactivate路由守卫需要的是Observable<boolean>（或boolean、Promise）来决定是否允许路由跳转。我们只需要调整openConfirmDialog的返回逻辑，让它直接返回代表用户选择的Observable即可。

修正后的核心代码 #

首先修改openConfirmDialog方法，让它返回Observable而不是Subscription：

openConfirmDialog(): Observable<boolean> {
  this.modalRef = this.modalService.show(ConfirmationComponent);
  // 返回Subject的Observable，用asObservable()避免外部调用者修改Subject状态
  return this.modalRef.content.onClose.asObservable();
}

你的canDeactivate方法可以保持原有逻辑，因为现在openConfirmDialog()返回的是符合要求的Observable<boolean>：

canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
  // 若无未保存修改则直接允许离开，否则返回等待用户确认的Observable
  return component.canDeactivate() ? true : this.openConfirmDialog();
}

为什么这样可行？ #

Angular的路由守卫会自动订阅返回的Observable：

• 当用户点击确认按钮，onClose Subject发出true，守卫接收到后允许路由跳转；
• 当用户点击取消按钮，onClose发出false，守卫阻止路由跳转。

额外优化：处理模态框意外关闭的情况 #

如果用户点击模态框外部（或通过其他方式）关闭模态框，你的onClose Subject可能不会发出任何值，导致守卫一直处于等待状态。可以在ConfirmationComponent中添加销毁钩子，默认返回false并结束Observable：

@Component({ templateUrl: './confirmation.component.html' }) 
export class ConfirmationComponent { 
  public onClose: Subject<boolean>; 

  constructor(private _bsModalRef: BsModalRef) { } 

  public ngOnInit(): void { 
    this.onClose = new Subject(); 
  } 

  public ngOnDestroy(): void {
    // 如果Observable还未完成，默认返回false并结束
    if (!this.onClose.closed) {
      this.onClose.next(false);
      this.onClose.complete();
    }
  }

  public onConfirm(): void { 
    this.onClose.next(true); 
    this.onClose.complete(); // 完成Observable，避免内存泄漏
    this._bsModalRef.hide(); 
  } 

  public onCancel(): void { 
    this.onClose.next(false); 
    this.onClose.complete(); // 完成Observable
    this._bsModalRef.hide(); 
  } 
}

这样无论用户怎么关闭模态框，守卫都会收到明确的布尔值，同时也避免了Observable一直处于活跃状态导致的内存泄漏。

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