IONIC Section 5 - 5.11 Naviguer entre les pages
Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !Bonjour à tous, pour accéder à la page de détails de recette, lorsque vous cliquez sur un élément de recette, dans notre « recipes.page.html » nous pouvons utiliser une fonctionnalité que nous avons vu ensemble auparavant. Nous allons ajouter « (click) », dans notre « ion-item ». Mais vous pouvez utiliser le « [routerLink]=« » », ce qui permet d’ajouter les components tout en ajoutant sa propre navigation. Alors comme son nom l’indique, nous allons insérer un lien, dynamique bien sûr, car l’ID qu’on veut charger diffère. C’est pourquoi on relie le « routerLink » entre crochet la propriété de liaison et ensuite, nous passons un tableau de segments dans lequel on ajoute «[ ‘./‘, recipe.id ] » qui permet de faire un lien relatif. Voyons si cela fonctionne, on sauvegarde et on bascule sur notre application, et si on click sur une recette, nous avons accès à la page des détails de recettes, et on peut s’apercevoir également qu’une petite transition s’est effectuée lors du changement de page. Maintenant, il serait bien de pouvoir revenir à la page précédente à l’aide d’un bouton de retour qui doit être ajouté séparément pour que nous puissions contrôler si on veut un bouton sur une page spécifique ou non. Maintenant, si on regarde la documentation dans nos components, dans la catégorie « toolbar », vous avez « ion-back-button », et vous avez la description ainsi que la disposition de ce component. Il est donc ranger dans « ion-buttons » en lui donnant un emplacement de départ avec « slot=« start » », la position de départ par défaut de la plate-forme, généralement située à gauche, mais selon la plate-forme, la région, la situation géographique ou l’utilisateur utilisera cette application, il se peut qu’elle se trouve à droite. Donc là on va ajouter « ion-buttons » dans notre fichier « recipe-detail.page.html », juste en dessous de notre « toolbar », avec un « slot= « start » », et ci-dessous on ajoute notre « ion-back-button » dans lequel on définit un attribut par défaut dans le cas où si cette page a été chargée en tant que première page. Donc on saisit « défaultHref=«/recipes ». Donc si nous sauvegardons notre progression, et qu’on revient sur notre application, on va cliquer sur notre recette, et une fois sur la page de détails, on teste notre bouton, et nous sommes bien redirigés vers notre page d’accueil. Cependant, si je clique sur la deuxième recette, nous sommes redirigés vers la première. Il s’agit d’un bug connu dans notre “routerLink” qui peut être corrigé en indiquant un chemin absolue [ ‘/recipes‘, recipe.id ] », et c’est à cet instant qu’on peut mettre un opérateur comparatif dans notre service avec « === ». Pour l’instant, c’est la façon de faire la plus simple qui soit, utilisez un chemin absolue pour la navigation et avec celui-ci, vous pouvez revenir en arrière, aller et retour aussi souvent que vous le souhaitez sur les différentes pages. Donc on utilise des fonctionnalités Angular, et c’est Ionic qui va ajouter des animations. Ionic assure également le suivi de vos mouvements de navigation. C’est la fin de cette vidéo, nous nous retrouverons pour la prochaine.