Ionic - 7.12 Revenir en arrière avec ion-back-button et NavController

Sur la page de détails d'un lieu, un bouton retour permet de revenir à la liste. Ce bouton fonctionne tant que l'application n'est pas rechargée. Cette leçon explique pourquoi, puis montre comment prévoir une page de repli et naviguer avec NavController.

Ajouter un bouton retour

Sur la page de détails, la barre d'en-tête reçoit un bouton retour, avec le composant ion-back-button placé dans un ion-buttons en position de départ. Le titre de la page devient Détails du lieu.

La vidéo précise que cet attribut doit être écrit en camel case, comme defaultHref. Une erreur de syntaxe a d'abord empêché le bon fonctionnement, puis elle a été corrigée.

<ion-buttons slot="start">
  <ion-back-button defaultHref="/places/tabs/discover"></ion-back-button>
</ion-buttons>

Comprendre la perte du bouton après un rechargement

Quand on recharge la page de détails, le bouton retour disparaît. Le rechargement redémarre l'application, et la pile des pages visitées est effacée. Ionic ne sait alors plus où revenir.

L'attribut defaultHref indique le chemin à suivre dans ce cas. Après son ajout, la page de détails affiche de nouveau le bouton Précédent, même après un rechargement.

Réserver un lieu et naviguer avec NavController

Le bouton de réservation appelle une méthode du fichier de la page. La vidéo injecte le routeur Angular et le NavController dans le constructeur. Le NavController conserve la même animation de transition que la navigation précédente.

La méthode navigateBack indique le chemin de la page de découverte. Une autre méthode, pop, revient simplement à la page précédente, mais elle ne fonctionne que si la pile contient une page. Après un rechargement, la vidéo montre qu'elle ne fonctionne plus.

this.navCtrl.navigateBack('/places/tabs/discover');

En résumé

Le bouton ion-back-button retourne à la page précédente. Son attribut defaultHref sert de secours après un rechargement, quand la pile des pages est vide. Pour une redirection précise, NavController propose navigateBack. La méthode pop n'est fiable que si une page précédente est garantie.

Points clés

• Un rechargement redémarre l'application et vide la pile des pages.
• defaultHref fournit un chemin de secours au bouton retour.
• Le nom de l'attribut s'écrit en camel case.
• navigateBack redirige vers un chemin précis.
• pop revient à la page précédente, mais seulement si elle existe.

Questions fréquentes

Pourquoi le bouton retour disparaît-il après un rechargement ?

Le rechargement redémarre l'application et efface la pile de pages. Ionic ne connaît alors plus la page précédente.

Quelle différence entre navigateBack et pop ?

navigateBack va vers un chemin que vous indiquez. pop revient à la page précédente sans chemin, mais seulement si la pile n'est pas vide.

Faut-il toujours utiliser defaultHref ?

La vidéo l'ajoute pour garantir une destination au bouton retour, même après un rechargement de la page.