Angular - Wie storniere ich eine Route Change, ausgelöst durch die Zurück-Schaltfläche?

Question

In meiner Anwendung möchte ich ein Eingabeaufforderungs-Meldungsfeld oder ein Modal zeigen, wann immer der Benutzer die Zurück-Taste drückt. Ich bin in der Lage, onPopState-Ereignis zu verwenden, aber es hindert den Benutzer nicht daran, rückwärts zu navigieren. Bisher habe ich folgendes:

window.onpopstate = (event) => 
     event.preventDefault(); 
     this.modal.showModal(); 
    }; 

Answer 1

Anstatt das Fensterobjekt zu verwenden, sollten Sie einen Route Guard verwenden. In Ihrer Routenkonfiguration sollten Sie einen CanDeactivate Guard hinzufügen. Follow this guide, ist es sehr ähnlich zu dem, was Sie erreichen möchten.

Answer 2

Hier ist, wie ich es in meiner App mache.

Importieren Sie die 'Location' API von angular in Ihr Modul.

import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common'; 

es an den

providers: [ Location, {provide: LocationStrategy, useClass: PathLocationStrategy}, ... ] 

Hinweis

Liste des Anbieters hinzufügen - Sie können den ‚PathLocatioStrategy‘ einen Teil davon nicht brauchen, wenn Sie nicht URLs manuell neu zu schreiben.

Dann in Ihrem Root-Komponente oder ein Singleton Service, Import Lage wieder ...

import { Location } from '@angular/common'; 

es in den Konstruktor injizieren

constructor (private location: Location) { .... 

dann auf die 'Zurück' PopStateEvent abonnieren.

location.subscribe((back: PopStateEvent) => { 
    ... your code here ... 
    this.modal.showModal(); 
}); 

Wenn Sie den Winkel Router oder etwas anderes verwenden, das den Winkel Location API und mit dem Weg Umschreiben verwendet, kann es diese von der Arbeit verhindern. Ich benutze den Angular Router nicht viel, aber ich vermute, dass es wahrscheinlich eine Methode für den Umgang mit PopStateEvents gibt.

Answer 3

Angular 2/4 bietet eine Möglichkeit, genau das gleiche zu tun. Und die Lösung ist canDeactivate.

canDeactivate ist eine Routeneigenschaft, die zur Route hinzugefügt werden kann, deren Komponente die Zurück-Schaltfläche enthält.

Der canDeactivate-Wächter übernimmt einen Dienst als Eingang. Der Dienst implementiert canDeactivate Schnittstelle (@ Angular/Router).

Wenn nur dieser Service wahr zurückgibt, würde der Benutzer zurückgehen können.

Weiterführende Literatur: https://angular.io/guide/router#candeactivate-handling-unsaved-changes