在离开页面之前警告用户未保存的更改

为了还包括防止浏览器刷新、关闭窗口等（有关该问题的详细信息，请参阅@ChristopheVidal 对 Günter 的回答的评论），我发现将 @HostListener 装饰器添加到您的类的 canDeactivate 实现以进行收听很有帮助beforeunload window 事件。如果配置正确，这将同时防止应用内导航和外部导航。

例如：

零件：

import { ComponentCanDeactivate } from './pending-changes.guard';
import { HostListener } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export class MyComponent implements ComponentCanDeactivate {
  // @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload')
  canDeactivate(): Observable<boolean> | boolean {
    // insert logic to check if there are pending changes here;
    // returning true will navigate without confirmation
    // returning false will show a confirm dialog before navigating away
  }
}

警卫：

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

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

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate() ?
      true :
      // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
      // when navigating away from your angular app, the browser will show a generic warning message
      // see http://stackoverflow.com/a/42207299/7307355
      confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.');
  }
}

路线：

import { PendingChangesGuard } from './pending-changes.guard';
import { MyComponent } from './my.component';
import { Routes } from '@angular/router';

export const MY_ROUTES: Routes = [
  { path: '', component: MyComponent, canDeactivate: [PendingChangesGuard] },
];

模块：

import { PendingChangesGuard } from './pending-changes.guard';
import { NgModule } from '@angular/core';

@NgModule({
  // ...
  providers: [PendingChangesGuard],
  // ...
})
export class AppModule {}

注意：正如@JasperRisseeuw 所指出的，IE 和 Edge 处理 beforeunload 事件的方式与其他浏览器不同，当 beforeunload 事件激活时（例如，浏览器刷新、关闭窗口等）。在 Angular 应用程序中导航不受影响，并且会正确显示您指定的确认警告消息。那些需要支持 IE/Edge 并且不希望 false 在 beforeunload 事件激活时在确认对话框中显示/想要更详细的消息的人可能还希望查看@JasperRisseeuw 的解决方法的答案。

路由器提供生命周期回调 CanDeactivate

有关详细信息，请参阅 guards tutorial

类 UserToken {} 类权限 { canActivate(user: UserToken, id: string): boolean { return true; } } @Injectable() 类 CanActivateTeam 实现 CanActivate { 构造函数（私有权限：Permissions，私有 currentUser：UserToken）{} canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnapshot）：Observable|Promise|boolean { return this .permissions.canActivate(this.currentUser, route.params.id); } } @NgModule({ 导入：[RouterModule.forRoot([ { path: 'team/:id', component: TeamCmp, canActivate: [CanActivateTeam] } ]) ]，提供者：[CanActivateTeam, UserToken, Permissions] }) 类应用模块 {}

原装（RC.x 路由器）

类 CanActivateTeam 实现 CanActivate { 构造函数（私有权限：Permissions，私有 currentUser：UserToken）{} canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnapshot）：Observable { return this.permissions.canActivate(this.currentUser, this.route.参数.id); } } bootstrap(AppComponent, [ CanActivateTeam, provideRouter([{ path: 'team/:id', component: Team, canActivate: [CanActivateTeam] }]) );

来自stewdebaker 的@Hostlistener 示例运行良好，但我对其进行了另一处更改，因为IE 和Edge 向最终用户显示了MyComponent 类的canDeactivate() 方法返回的“false”。

零件：

import {ComponentCanDeactivate} from "./pending-changes.guard";
import { Observable } from 'rxjs'; // add this line

export class MyComponent implements ComponentCanDeactivate {

  canDeactivate(): Observable<boolean> | boolean {
    // insert logic to check if there are pending changes here;
    // returning true will navigate without confirmation
    // returning false will show a confirm alert before navigating away
  }

  // @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
    if (!this.canDeactivate()) {
        $event.returnValue = "This message is displayed to the user in IE and Edge when they navigate without using Angular routing (type another URL/close the browser/etc)";
    }
  }
}

2020年6月答案：

请注意，到目前为止提出的所有解决方案都没有处理 Angular 的 canDeactivate 防护的重大已知缺陷：

用户单击浏览器中的“返回”按钮，显示对话框，然后用户单击取消。用户再次单击“返回”按钮，显示对话框，用户单击确认。注意：用户被导航回 2 次，这甚至可以将他们完全带出应用程序 :(

这已在 here、here 和详细here中讨论过

请参阅我对问题 demonstrated here 的解决方案，该解决方案可以安全地解决此问题*。这已经在 Chrome、Firefox 和 Edge 上进行了测试。

* IMPORTANT CAVEAT：在这个阶段，上面会在点击后退按钮时清除前进历史，但保留后退历史。如果保留您的转发历史记录至关重要，则此解决方案将不合适。在我的例子中，当涉及到表单时，我通常使用 master-detail 路由策略，因此维护转发历史记录并不重要。

我已经实现了来自@stewdebaker 的解决方案，效果非常好，但是我想要一个漂亮的引导弹出窗口，而不是笨拙的标准 JavaScript 确认。假设您已经在使用 ngx-bootstrap，您可以使用@stwedebaker 的解决方案，但将“Guard”换成我在这里展示的那个。您还需要引入 ngx-bootstrap/modal，并添加一个新的 ConfirmationComponent：

警卫

（将“确认”替换为将打开引导模式的函数 - 显示新的自定义 ConfirmationComponent）：

import { Component, OnInit } from '@angular/core';
import { ConfirmationComponent } from './confirmation.component';

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal';

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

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {

  modalRef: BsModalRef;

  constructor(private modalService: BsModalService) {};

  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate() ?
      true :
      // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
      // when navigating away from your angular app, the browser will show a generic warning message
      // see http://stackoverflow.com/a/42207299/7307355
      this.openConfirmDialog();
  }

  openConfirmDialog() {
    this.modalRef = this.modalService.show(ConfirmationComponent);
    return this.modalRef.content.onClose.map(result => {
        return result;
    })
  }
}

确认.component.html

<div class="alert-box">
    <div class="modal-header">
        <h4 class="modal-title">Unsaved changes</h4>
    </div>
    <div class="modal-body">
        Navigate away and lose them?
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="onConfirm()">Yes</button>
        <button type="button" class="btn btn-secondary" (click)="onCancel()">No</button>        
    </div>
</div>

确认.component.ts

import { Component } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
    templateUrl: './confirmation.component.html'
})
export class ConfirmationComponent {

    public onClose: Subject<boolean>;

    constructor(private _bsModalRef: BsModalRef) {

    }

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

    public onConfirm(): void {
        this.onClose.next(true);
        this._bsModalRef.hide();
    }

    public onCancel(): void {
        this.onClose.next(false);
        this._bsModalRef.hide();
    }
}

由于新的 ConfirmationComponent 将在不使用 html 模板中的 selector 的情况下显示，因此需要在根 app.module.ts（或无论你命名你的根模块）。对 app.module.ts 进行以下更改：

import { ModalModule } from 'ngx-bootstrap/modal';
import { ConfirmationComponent } from './confirmation.component';

@NgModule({
  declarations: [
     ...
     ConfirmationComponent
  ],
  imports: [
     ...
     ModalModule.forRoot()
  ],
  entryComponents: [ConfirmationComponent] // Only when using old ViewEngine