Benutzer von nicht gespeicherten Änderungen warnen, bevor Registerkarten auf einer Seite geändert werden

Question

Auf meiner Angular2-Seite habe ich Daten auf 3 verschiedene Registerkarten aufgeteilt. Diese 3 Registerkarten zeigen Daten von 3 verschiedenen Abschnitten desselben Modells. Jede Registerkarte hat die Option Daten speichern. Wie warne ich den Benutzer vor nicht gespeicherten Änderungen, wenn er auf einen anderen Tab wechselt, ohne die Daten zu ändern?

Bitte beachten Sie, dass diese Seite eine einzige URL hat und es keine spezifischen Router für jede Registerkarte gibt.

Benötige ich wirklich einzelne Router für jede Registerkarte und Lebenszyklus-Callback CanDeactivate, um damit umzugehen? Gibt es noch andere Möglichkeiten? Ich möchte keine einzelnen Router erstellen, da sich diese 3 Registerkarten auf derselben Seite befinden.

Answer 1

Ich nehme an, dass Sie auf das Klickereignis auf der Registerkarte reagieren können? Dies scheint der wahrscheinlichste Ort zu sein, um Code hinzuzufügen, um festzustellen, ob der Benutzer Änderungen vorgenommen hat, die zuerst gespeichert werden müssen.

Ich habe eine Beispielanwendung mit Tabs bearbeitet, aber ich erlaube mir, jeden Tab zu aktualisieren, ohne zuerst die Änderungen zu speichern. Die App erfordert erfordern den Benutzer zu speichern, bevor Sie aus der Bearbeitung navigieren. Wenn Sie interessiert sind, können Sie den Code dafür finden Sie hier: https://github.com/DeborahK/Angular-Routing/tree/master/APM-Final