Ionic - 7.11 Naviguer vers une page de détails depuis une carte
Les pages de l'application sont maintenant prêtes, mais aucun lien ne mène encore au détail d'un lieu. Cette leçon ajoute un bouton dans la carte, puis une navigation depuis la liste. Nous voyons aussi pourquoi le retour du navigateur et le retour d'Ionic ne donnent pas exactement la même transition.
Ajouter un bouton qui ouvre les détails
Le bouton est placé dans la carte, après le contenu, dans une div alignée à droite grâce à une classe de texte. Il utilise le style clear et la couleur primary, donc il n'a ni bordure ni fond.
Le lien utilise routerLink avec un chemin absolu, c'est-à-dire un chemin qui commence par une barre oblique. Ce chemin reprend le segment de la route des onglets, puis l'identifiant du lieu.
Naviguer depuis la liste
Pour la liste, il suffit d'ajouter un routerLink sur chaque ion-item, car les lieux sont stockés dans une variable. Un clic sur la ligne ouvre alors la page de détails.
L'attribut detail ajoute une petite flèche qui indique que la ligne mène vers une autre page.
Retour du navigateur et retour Ionic
La page de détails n'a pas encore de bouton retour. On peut utiliser le bouton du navigateur, mais la transition n'est pas la même que celle d'Ionic, car elle dépend du navigateur.
Ionic permet aussi de préciser le sens de navigation avec routerDirection, en forward ou en backward. Ionic le détecte généralement seul, et cette leçon ne l'utilise pas.
En résumé
Un routerLink suivi d'un chemin absolu ouvre la page de détails depuis un bouton ou une ligne de liste. L'attribut detail affiche une flèche qui signale la navigation. Le sens de l'animation peut être précisé avec routerDirection si besoin.
Points clés
- routerLink ouvre une autre page depuis un bouton ou un élément de liste.
- Un chemin absolu commence par une barre oblique.
- L'attribut detail affiche une flèche sur une ligne d'ion-item.
- Le retour du navigateur n'a pas la même transition que le retour Ionic.
- routerDirection précise le sens de l'animation, mais il n'est pas nécessaire ici.
Questions fréquentes
Pourquoi utiliser un chemin absolu plutôt qu'un chemin relatif ?
Le chemin absolu commence par une barre oblique et décrit la destination complète. Il évite les erreurs liées à la position du lien dans l'application.
Peut-on utiliser le bouton retour du navigateur ?
Oui, mais la transition n'est pas identique à celle du bouton retour d'Ionic, car elle dépend du navigateur.
Faut-il toujours indiquer routerDirection ?
Non. Ionic détecte généralement le sens tout seul. Il devient utile seulement lorsqu'une page peut être la première chargée de l'application.