canDeactivate 在返回第一个 false 的情况下，下一次 true 导航两次答案

【问题标题】：canDeactivate in case of returning first false, next time true navigates twicecanDeactivate 在返回第一个 false 的情况下，下一次 true 导航两次
【发布时间】：2019-06-24 07:19:31
【问题描述】：

我有某种“未保存的更改”弹出窗口，用户可以在其中取消返回导航。在这种情况下，当用户单击取消（canDeactivateguard 返回 false），然后尝试返回（调用canDeactivate）并且用户选择“离开而不保存”（canDeactivateguard 返回 true），导航返回发生两次。

组件

  @HostListener('window:beforeunload')
  canDeactivate(): Observable<boolean> | boolean {
    return !this.unsavedChangesAvailable;
  }

守卫

  canDeactivate(
    component: BLAComponent,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (!component.canDeactivate()) {
      this.unsavedChangesModal = this.dialog.open(UnsavedChangesModalComponent, {
        height: 'auto',
        width: 'auto'
      });
      return this.unsavedChangesModal.afterClosed().pipe(
        map((choice: boolean) => {
          return choice;
        }));
    } else {
      return of(true);
    }
  }

模态

 <button mat-button [mat-dialog-close]="false" cdkFocusInitial>
    {{ 'EDITOR.UNSAVED_CHANGES_MODAL.CANCEL' | translate }}</button>
    <button mat-button [mat-dialog-close]="true">{{
      'EDITOR.UNSAVED_CHANGES_MODAL.LEAVE_WITHOUT_SAVE' | translate }}
    </button>

问题出现在 Angular 6 中，也出现在上一个版本 8 中。我已经更新了它，因为我以为问题解决了（https://github.com/angular/angular/issues?utf8=%E2%9C%93&q=is%3Aissue+candeactivate+twice），但更新并没有解决问题。

【问题讨论】：

是什么让你认为它已经解决了？问题仍未解决：github.com/angular/angular/issues/13586

标签： angular guard

【解决方案1】：

我有一个解决方法。在组件中创建一个标志，并使用它来显示和隐藏守卫内的弹出窗口。

canDeactivate(component: PreventDiscardChangesAwareComponent): Promise<boolean> {
return new Promise((resolve, reject) => {
  if (!!component && !!component.preventDiscardChanges && component.isDiscardChangesPreventionNeeded) {
    if (!!component.isDiscardChangesPreventionNeeded() && !component.popupShowed) {
      this.store.dispatch(new HideProgressSpinnerAction());
      component.preventDiscardChanges().subscribe((result) => {
        this.store.dispatch(new ShowProgressSpinnerAction());
        if (result) {
          resolve(true);
          component.popupShowed = true;
        } else {
          resolve(false);
        }
      });
    } else {
      resolve(true);
    }
  } else {
    resolve(true);
  }
});

}

并在组件内部添加一个带有 false 的新标志 'popupShowed'

【讨论】：