Zum Hauptinhalt springen

Navigation Events

ChatGPT öffnen

Neben komponentenspezifischen Lebenszyklusereignissen können Sie globale Ereignislistener auf Router-Ebene registrieren. Dies ermöglicht die globale Verfolgung der Navigation in der gesamten App, was nützlich für Protokollierung, Analytik oder andere bereichsübergreifende Belange ist.

Beispiel: Globaler Navigationslistener​

Router.getCurrent().addNavigateListener(event -> {
  Location location = event.getLocation();
  console().log("Navigiert zu: " + location.getFullURI());
});

In diesem Beispiel wird ein globaler Listener registriert, um jedes Navigationsereignis in der App zu protokollieren. Dies ist nützlich für Audits oder zur Verfolgung von Seitenaufrufen.

Registrieren globaler Lebenszyklusereignis-Listener​

Globale Listener können verschiedenen Lebenszyklusereignissen zugeordnet werden, einschließlich:

  • WillEnterEvent: Wird ausgelöst, bevor eine Komponente einer Route an das DOM angehängt wird.
  • DidEnterEvent: Wird ausgelöst, nachdem eine Komponente an das DOM angehängt wurde.
  • WillLeaveEvent: Wird ausgelöst, bevor eine Komponente vom DOM abgetrennt wird.
  • DidLeaveEvent: Wird ausgelöst, nachdem eine Komponente vom DOM abgetrennt wurde.
  • NavigateEvent: Wird jedes Mal ausgelöst, wenn eine Navigation erfolgt.
Verwendung von Beobachtern zum Haken in Lebenszyklusereignisse

Sie können auch die Lebenszyklusereignisse über Beobachter hooken. Weitere Details finden Sie in den Lifecycle Observers.

Beispiel: Globaler WillLeaveEvent-Listener​

Router.getCurrent().addWillLeaveListener(event -> {
  ConfirmDialog.Result result = showConfirmDialog(
      "Sind Sie sicher, dass Sie diese Ansicht verlassen möchten?",
      "Ansicht verlassen",
      ConfirmDialog.OptionType.OK_CANCEL,
      ConfirmDialog.MessageType.WARNING);

  event.veto(result == ConfirmDialog.Result.CANCEL);
});

In diesem Fall wird das WillLeaveEvent global verwendet, um einen Bestätigungsdialog anzuzeigen, bevor der Benutzer von einer Ansicht navigiert.