Avertir l'utilisateur des modifications non enregistrées avant de quitter la page

Je souhaite avertir les utilisateurs des modifications non enregistrées avant de quitter une page particulière de mon application angular 2. Normalement, j'utiliserais window.onbeforeunload, mais cela ne fonctionne pas pour les applications d'une seule page.

J'ai trouvé que dans angular 1, vous pouvez vous connecter à l' $locationChangeStartévénement pour lancer une confirmboîte pour l'utilisateur, mais je n'ai rien vu qui montre comment faire fonctionner cela pour angular 2, ou si cet événement est même toujours présent . J'ai également vu des plugins pour ag1 qui fournissent des fonctionnalités pour onbeforeunload, mais encore une fois, je n'ai vu aucun moyen de l'utiliser pour ag2.

J'espère que quelqu'un d'autre a trouvé une solution à ce problème; l'une ou l'autre méthode fonctionnera bien pour mes besoins.

Le routeur fournit un rappel de cycle de vie CanDeactivate

pour plus de détails, voir le tutoriel sur les gardes

class UserToken {}
class Permissions {
  canActivate(user: UserToken, id: string): boolean {
    return true;
  }
}
@Injectable()
class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canActivate(this.currentUser, route.params.id);
  }
}
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canActivate: [CanActivateTeam]
      }
    ])
  ],
  providers: [CanActivateTeam, UserToken, Permissions]
})
class AppModule {}

d'origine (routeur RC.x)

class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean> {
    return this.permissions.canActivate(this.currentUser, this.route.params.id);
  }
}
bootstrap(AppComponent, [
  CanActivateTeam,
  provideRouter([{
    path: 'team/:id',
    component: Team,
    canActivate: [CanActivateTeam]
  }])
);

Pour couvrir également les protections contre les actualisations du navigateur, la fermeture de la fenêtre, etc. (voir le commentaire de @ ChristopheVidal à la réponse de Günter pour plus de détails sur le problème), j'ai trouvé utile d'ajouter le @HostListenerdécorateur à l' canDeactivateimplémentation de votre classe pour écouter l' beforeunload windowévénement. Une fois configuré correctement, cela protégera à la fois la navigation dans l'application et la navigation externe.

Par exemple:

Composant:

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
  }
}

Garde:

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.');
  }
}

Itinéraires:

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] },
];

Module:

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

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

REMARQUE : Comme @JasperRisseeuw l'a souligné, IE et Edge gèrent l' beforeunloadévénement différemment des autres navigateurs et incluront le mot falsedans la boîte de dialogue de confirmation lorsque l' beforeunloadévénement s'activera (par exemple, le navigateur s'actualise, ferme la fenêtre, etc.). La navigation dans l'application Angular n'est pas affectée et affichera correctement votre message d'avertissement de confirmation désigné. Ceux qui ont besoin de prendre en charge IE / Edge et qui ne veulent falsepas afficher / veulent un message plus détaillé dans la boîte de dialogue de confirmation lorsque l' beforeunloadévénement s'active peuvent également vouloir voir la réponse de @ JasperRisseeuw pour une solution de contournement.

L'exemple avec @Hostlistener de stewdebaker fonctionne très bien, mais j'y ai apporté une autre modification car IE et Edge affichent le "false" qui est retourné par la méthode canDeactivate () sur la classe MyComponent à l'utilisateur final.

Composant:

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)";
    }
  }
}

J'ai implémenté la solution de @stewdebaker qui fonctionne très bien, mais je voulais une belle fenêtre contextuelle de démarrage au lieu du JavaScript standard maladroit. En supposant que vous utilisez déjà ngx-bootstrap, vous pouvez utiliser la solution de @ stwedebaker, mais remplacez le «Guard» par celui que je montre ici. Vous devez également introduire ngx-bootstrap/modalet ajouter un nouveau ConfirmationComponent:

Garde

(remplacez 'confirm' par une fonction qui ouvrira un modal bootstrap - affichant un nouveau, personnalisé 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;
    })
  }
}

confirmation.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>

confirmation.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();
    }
}

Et puisque le nouveau ConfirmationComponentsera affiché sans utiliser de selectordans un modèle html, il doit être déclaré entryComponentsdans votre racine app.module.ts(ou quel que soit votre nom de module racine). Apportez les modifications suivantes à 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]

La solution était plus facile que prévu, ne l'utilisez pas hrefcar elle n'est pas gérée par la routerLinkdirective d' utilisation du routage angulaire à la place.

Réponse de juin 2020:

Notez que toutes les solutions proposées jusqu'à présent ne traitent pas d'un défaut connu significatif des canDeactivategardes Angular :

1. L'utilisateur clique sur le bouton «retour» dans le navigateur, la boîte de dialogue s'affiche et l'utilisateur clique sur ANNULER .
2. L'utilisateur clique à nouveau sur le bouton «retour», la boîte de dialogue s'affiche et l'utilisateur clique sur CONFIRMER .
3. Remarque: l'utilisateur est renvoyé 2 fois, ce qui pourrait même le retirer complètement de l'application :(

Cela a été discuté ici , ici et en détail ici

Veuillez consulter ma solution au problème illustré ici qui fonctionne en toute sécurité autour de ce problème *. Cela a été testé sur Chrome, Firefox et Edge.

* AVERTISSEMENT IMPORTANT : À ce stade, ce qui précède effacera l'historique de transfert lorsque le bouton de retour est cliqué, mais conservera l'historique de retour. Cette solution ne sera pas appropriée si la préservation de votre historique avant est vitale. Dans mon cas, j'utilise généralement une stratégie de routage maître-détails en ce qui concerne les formulaires, il n'est donc pas important de conserver l'historique avant.