Warnen Sie den Benutzer vor nicht gespeicherten Änderungen, bevor Sie die Seite verlassen

Ich möchte Benutzer vor nicht gespeicherten Änderungen warnen, bevor sie eine bestimmte Seite meiner Angular 2-App verlassen. Normalerweise würde ich verwenden window.onbeforeunload, aber das funktioniert nicht für Anwendungen mit nur einer Seite.

Ich habe festgestellt, dass Sie sich in Winkel 1 an das $locationChangeStartEreignis anschließen können, um eine confirmBox für den Benutzer zu erstellen, aber ich habe nichts gesehen, was zeigt, wie dies für Winkel 2 funktioniert, oder ob dieses Ereignis überhaupt noch vorhanden ist . Ich habe auch Plugins für ag1 gesehen, die Funktionen für ag2 bereitstellen onbeforeunload, aber ich habe auch keine Möglichkeit gesehen, sie für ag2 zu verwenden.

Ich hoffe, jemand anderes hat eine Lösung für dieses Problem gefunden. Beide Methoden funktionieren für meine Zwecke einwandfrei.

Der Router bietet einen Lebenszyklus-Rückruf CanDeactivate

Weitere Informationen finden Sie im Tutorial für Wachen

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

Original (RC.x Router)

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

Ich habe es als hilfreich empfunden, den @HostListenerDekorator zur canDeactivateImplementierung Ihrer Klasse hinzuzufügen , um auf das beforeunload windowEreignis zu warten, um auch Schutz vor Browseraktualisierungen, Schließen des Fensters usw. abzudecken (siehe @ ChristopheVidals Kommentar zu Günters Antwort für Details zu diesem Problem) . Bei korrekter Konfiguration schützt dies gleichzeitig vor In-App- und externer Navigation.

Beispielsweise:

Komponente:

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

Bewachen:

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

Routen:

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

Modul:

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

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

HINWEIS : Wie @JasperRisseeuw hervorhob, behandeln IE und Edge das beforeunloadEreignis anders als andere Browser und fügen das Wort falsein den Bestätigungsdialog ein, wenn das beforeunloadEreignis aktiviert wird (z. B. Aktualisieren des Browsers, Schließen des Fensters usw.). Das Navigieren innerhalb der Angular-App bleibt davon unberührt und zeigt die angegebene Bestätigungswarnmeldung ordnungsgemäß an. Diejenigen, die IE / Edge unterstützen müssen und bei Aktivierung falsedes beforeunloadEreignisses keine detailliertere Meldung im Bestätigungsdialog anzeigen / möchten, möchten möglicherweise auch die Antwort von @ JasperRisseeuw für eine Problemumgehung sehen.

Das Beispiel mit dem @ Hostlistener von stewdebaker funktioniert sehr gut, aber ich habe noch eine Änderung daran vorgenommen, da IE und Edge das "false" anzeigen, das von der canDeactivate () -Methode in der MyComponent-Klasse an den Endbenutzer zurückgegeben wird.

Komponente:

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

Ich habe die Lösung von @stewdebaker implementiert, die wirklich gut funktioniert, aber ich wollte ein nettes Bootstrap-Popup anstelle der klobigen Standard-JavaScript-Bestätigung. Angenommen, Sie verwenden bereits ngx-bootstrap, können Sie die Lösung von @ stwedebaker verwenden, aber tauschen Sie den 'Guard' gegen den hier gezeigten. Sie müssen ngx-bootstrap/modalauch ein neues hinzufügen und hinzufügen ConfirmationComponent:

Bewachen

(Ersetzen Sie 'Bestätigen' durch eine Funktion, die ein Bootstrap-Modal öffnet und ein neues, benutzerdefiniertes anzeigt. 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;
    })
  }
}

bestätigung.Komponente.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>

Bestätigung.Komponente.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();
    }
}

Und da das Neue ConfirmationComponentohne Verwendung eines selectorin einer HTML-Vorlage angezeigt wird , muss es entryComponentsin Ihrem Root app.module.ts(oder wie auch immer Sie Ihr Root-Modul nennen) deklariert sein . Nehmen Sie folgende Änderungen vor 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]

Die Lösung war einfacher als erwartet. Verwenden Sie sie nicht, hrefda dies nicht von der Angular Routing- routerLinkDirektive use verwendet wird.

Antwort vom Juni 2020:

Beachten Sie, dass alle bis zu diesem Zeitpunkt vorgeschlagenen Lösungen keinen wesentlichen bekannten Fehler bei Angulars canDeactivateWachen behandeln:

1. Der Benutzer klickt im Browser auf die Schaltfläche "Zurück", das Dialogfeld wird angezeigt und der Benutzer klickt auf " ABBRECHEN" .
2. Der Benutzer klickt erneut auf die Schaltfläche "Zurück", das Dialogfeld wird angezeigt und der Benutzer klickt auf BESTÄTIGEN .
3. Hinweis: Der Benutzer wird zweimal zurück navigiert, wodurch er möglicherweise sogar vollständig aus der App entfernt wird :(

Dies wurde hier , hier und ausführlich hier diskutiert

Bitte lesen Sie meine Lösung für das hier gezeigte Problem , die dieses Problem sicher umgeht *. Dies wurde auf Chrome, Firefox und Edge getestet.

* WICHTIGE CAVEAT : In diesem Stadium wird der Vorwärtsverlauf gelöscht , wenn auf die Schaltfläche "Zurück" geklickt wird. Der Rückwärtsverlauf wird jedoch beibehalten. Diese Lösung ist nicht geeignet, wenn die Aufbewahrung Ihrer Vorwärtshistorie von entscheidender Bedeutung ist. In meinem Fall verwende ich normalerweise eine Master-Detail- Routing-Strategie, wenn es um Formulare geht. Daher ist es nicht wichtig, den Vorwärtsverlauf beizubehalten.