Ich versuche zum ersten Mal einen Back-Button-Guard in Angular 4 zu implementieren. Ich versuche einen Service zu nutzen und canDeactivate.Angular 4 canDeactivate schlägt fehl, wenn die Zurück-Taste zweimal hintereinander gedrückt wird
Ich verwende den folgenden Dienst (Code, den ich im Internet gefunden, nicht mein Original-Code):
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;
}
}
Da ist in meinem Routing-Modul, ich habe den folgenden Pfad, die canDeactivate verwendet:
{ path: 'contacts/:id/edit', canActivate: [AuthGuard], component: ContactEditComponent, data: { title: 'Edit Contact' }, canDeactivate: [CanDeactivateGuard] }
Schließlich wird in der Komponente, wo ich wieder Schaltfläche Routing-Schutz will, muss ich die folgende Methode:
canDeactivate() {
if (this.editMode) {
return window.confirm('Discard changes?');
}
return true;
}
Ich hatte erwartet, dass jedes Mal, wenn ich versuchte, den Zurück-Knopf zu drücken, ich ein Popup mit den 'Änderungen verwerfen' erhalten würde. Botschaft.
Was passiert, wenn ich die Zurück-Taste drücke, erscheint der Popup-Alarm wie erwartet. Wenn ich "Abbrechen" wähle, navigiert die App nicht zur vorherigen Komponente. Wenn ich jedoch die Taste "Zurück" ein zweites Mal drücke, navigiert die App zurück zu zwei Komponenten (mit anderen Worten zu der "Seite" vor der "Seite" vor der "Seite", die ich gerade betrachte).
Nur zu Testzwecken versuchte ich if (this.editMode) durch if (true) zu ersetzen, nur um zu bestätigen, dass der Zustand nicht verloren ging. Es gab keine Veränderung im Verhalten.