Schließen Sie das Dialogfeld "Angular Material" im Browser Zurück

Ich verwende Angular Material (5.0.0), um eine Single Page Web Application für mobile Geräte zu erstellen. Ich habe ein Szenario, wenn ich einen Dialog anzeigen muss. Ich möchte dem Benutzer erlauben, zurückzuschlagen, um den Dialog zu schließen, da dies ein sehr häufiges Verhalten auf Mobilgeräten ist (besonders bei Android).Schließen Sie das Dialogfeld "Angular Material" im Browser Zurück

Wenn dies momentan geschieht, wird die vorherige Seite angezeigt. Ich brauche stattdessen die Schaltfläche, um den Dialog einfach zu schließen.

Irgendwelche Ideen, wie dies erreicht werden könnte ??

Quelle

2017-12-08 Brian Bauman

Sie einen Browser zurück Aktion isolieren könnte - [wie folgt] (https : //stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser) - und verhindern Sie es, dann führen Sie Ihre gewünschte Aktion aus. – bazzells

Sie können die MatDialog Service injizieren und closeAll Methode aufrufen, alle geöffneten Dialoge wie unten zu schließen,

constructor(public dialog: MatDialog) { 
     this.dialog.closeAll(); 
}

LIVE DEMO

Quelle

2017-12-08 23:54:14 Aravind

Vielleicht ist das Hauptproblem mit dieser Zurück-Taste? –

nicht so. Mit welcher Komponente navigieren Sie, indem Sie auf die Schaltfläche "Zurück" klicken. – Aravind

Ich könnte nicht klar gewesen sein. Ich bin auf meiner Komponente, sagen wir MainComponent. Der Benutzer führt eine Aktion aus, die einen Dialog startet. Der Benutzer schlägt (Browser) zurück, um den Dialog abzubrechen. Momentan bearbeitet der Router die Änderung der URL und zeigt die vorherige Komponente an (und nimmt auch den Dialog herunter). Ich möchte, dass sie auf der MainComponent bleiben (ohne die Komponente zu ändern) und einfach den Dialog herunterfahren. Ich stelle mir vor, um dies zu erreichen, muss ich den Dialog einige wie die URL ändern, so dass der Browser zurück die URL zurück zu der ursprünglichen Komponente URL ändert, aber nicht sicher, wie. –

Schließen Sie das Dialogfeld "Angular Material" im Browser Zurück

Antwort

Verwandte Themen