Siirry pääsisältöön

Navigation Events

Avaa ChatGPT:ssä

Lisäksi komponenttikohtaisten elinkaaritapahtumien ohella voit rekisteröidä globaalit tapahtumakuuntelijat reitittimen tasolla. Tämä mahdollistaa navigoinnin seuraamisen globaalisti koko sovelluksessa, mikä on hyödyllistä lokitusta, analytiikkaa tai muita poikkileikkavia huolenaiheita varten.

Esimerkki: Globaali navigointikuuntelija​

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

Tässä esimerkissä globaalinen kuuntelija rekisteröidään lokittamaan jokainen navigointitapahtuma sovelluksessa. Tämä on hyödyllistä tarkastelua tai sivunäkymien seuraamista varten.

Globaalien elinkaaritapahtumakuuntelijoiden rekisteröinti​

Globaalit kuuntelijat voidaan liittää erilaisiin elinkaaritapahtumiin, mukaan lukien:

  • WillEnterEvent: Laukaisee ennen kuin minkään reitin komponentti liitetään DOM:iin.
  • DidEnterEvent: Laukaisee sen jälkeen, kun komponentti on liitetty DOM:iin.
  • WillLeaveEvent: Laukaisee ennen kuin komponentti irrotetaan DOM:ista.
  • DidLeaveEvent: Laukaisee sen jälkeen, kun komponentti on irrotettu DOM:ista.
  • NavigateEvent: Laukaisee joka kerta, kun navigointi tapahtuu.
  • ActivateEvent (desde 25.03): Laukaisee, kun välimuistissa oleva komponentti aktivoidaan uudelleen.
Käyttäen Observereita elinkaaritapahtumiin liittymiseksi

Voit myös liittää elinkaaritapahtumiin käyttämällä observereita. Lisätietoja varten katso Lifecycle Observers.

Esimerkki: Globaali WillLeaveEvent -kuuntelija​

Router.getCurrent().addWillLeaveListener(event -> {
  ConfirmDialog.Result result = showConfirmDialog(
      "Are you sure you want to leave this view?",
      "Leave View",
      ConfirmDialog.OptionType.OK_CANCEL,
      ConfirmDialog.MessageType.WARNING);

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

Tässä tapauksessa WillLeaveEvent käytetään globaalisti näyttämään vahvistusdialogi ennen kuin käyttäjä navigoi pois mistä tahansa näkymästä.