如果连续按两次后退按钮，Angular 4 canDeactivate 会失败

Question

我第一次尝试在 Angular 4 中实现后退按钮防护。我正在尝试使用服务并且可以停用。

我正在使用以下服务(我在网上找到的代码，不是我的原始代码):

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';

export interface CanComponentDeactivate {
    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {

    canDeactivate(component: CanComponentDeactivate) {
        return component.canDeactivate ? component.canDeactivate() : true;
    }

}

然后在我的路由模块中，我有以下使用 canDeactivate 的路径:

{ path: 'contacts/:id/edit', canActivate: [AuthGuard], component: ContactEditComponent, data: { title: 'Edit Contact' }, canDeactivate: [CanDeactivateGuard] }

最后，在我想要后退按钮路由保护的组件中，我有以下方法:

canDeactivate() {
  if (this.editMode) {
    return window.confirm('Discard changes?');
  }
  return true;
}

我期望每次尝试点击后退按钮时都会收到一个弹出窗口，其中显示“放弃更改？”消息。

发生的情况是，如果我点击后退按钮，弹出警报就会按预期出现。如果我选择“取消”，应用程序将不会导航到上一个组件。但是，如果我随后点击后退按钮，应用程序将导航回两个组件(换句话说，导航到我正在查看的“页面”之前的“页面”之前的“页面”)。

出于测试目的，我尝试将 if (this.editMode) 替换为 if (true) 只是为了确认状态没有丢失。行为没有改变。

Answer 1

这似乎是一个已知的 Angular 错误，已修复并正在等待冲突解决，然后才会合并到 Angular GitHub 主分支中。

https://github.com/angular/angular/pull/18135