IONIC Section 5 - 5.10 Extraction et affichage des données de paramètres d'itinéraire

Bonjour à tous, pour obtenir une seule recette sur notre page « recipe-detail.page.ts » nous aurons besoin de notre « recipeId » que nous obtenons en tant que segment dynamique sur notre chemin présent dans notre fichier « app-routing.module.ts ». Donc on revient dans notre « recipe-detail.page.ts » où nous pouvons utiliser une stratégie Angular par défaut dans laquelle nous obtenons des informations sur l’itinéraire activé, avec « constructor(private activatedRoute: ActivatedRoute) { } » et l’importer avec « import {ActivatedRoute } from ‘@angular/router’; » qui est un objet que vous pouvez utilisez dans votre « ngOnInit() { this.activatedRoute.paramMap. » pour regarder ensuite votre « param map » qui est un peu complexe mais qui signifie finalement une carte de tous les paramètres que cette route reçoit et les paramètres sont ces segments d’URL dynamiques. Ce n’est pas un objet avec tous ces segments, mais plutôt un soi-disant observable. Les observables sont essentiellement des objets auxquels vous pouvez vous abonner pour obtenir des données, qu’il s’agisse de données ponctuelles. Comme lorsque vous envoyez une demande HTTP ou plusieurs fois si vous vous abonnez à quelque chose qui émet de nouvelles données toutes les X secondes ou chaque fois qu’un utilisateur clique quelque part où à quelque chose comme ça, donc on ajoute « .subscribe(); ». Cette observable émettra de nouvelles données chaque fois que nos segments dynamiques changent, même si nous sommes toujours sur la même page, mais cela change en quelque sorte parce que nous avons un bouton qui les modifie. Dans « subscribe », nous transmettons une fonction qui sera exécutée lorsque nous recevrons de nouvelles données. Cette fonction obtiendra un objet « (paramMap => { } » et il s’agit maintenant de l’objet où nous pouvons extraire nos paramètres. Donc, tout d’abord, je peux vérifier si notre « paramMap » n’a pas « recipeId » en tant que paramètre en intégrant un « if (!paramMap.has(‘recipeId’)) » Cela devrait être le cas car nous l’avons définie ici, dans le fichier « app-routing.module.ts », au niveau de notre « path ». Donc le but est de rediriger l’utilisateur afin de s’assurer qu’il quitte la page ici. Suite à cela, « { return } ». Ainsi, recipeId peut être extrait du « paramMap », en indiquant ci-dessous : « const recipeId = paramMap.get(‘recipeId’); » et maintenant, on va extraire notre ID ici et maintenant, nous pouvons utiliser le service pour le charger. Donc, pour cela, nous devons injecter notre service de recettes, par le biais de notre constructor( private recipesService: RecipesService ), bien sûr vous devez également importer le service de recettes avec « import { RecipesService } from ‘../recipes.service’; ». On peut récupérer notre recette, en effectuant en dessous de notre constante, « this.recipesService.getRecipe(recipeId); ». Maintenant, ceci retournera une seule recette, et pour l’utiliser dans le template, nous devons la stocker dans une propriété de notre classe ici, juste en dessous de « export », en la nommant « loadedRecipe: Recipe; », ce qui permet de dire que ce sera une recette ou une valeur nulle, mais au départ, cela reste indéfini, mais une fois que les données y sont contenues, elles doivent être de type recette. Donc on va récupérer ici notre recette, « this.loadedRecipe = this.recipesService.getRecipe(recipeId); » afin d’accéder à notre recette. Et maintenant dans notre fichier « recipe-detail.page.html », on souhaite exporter une image. Pour cela, on va indiquer dans le « ion-content », « ion-img [src]=« loadedRecipe.imageUrl» que l’on va envelopper dans un « ion-grid » afin de contrôler la taille, mais aussi un « ion-row » et l’incorporer dans un « ion-col ». Suite à cela on va faire un autre « ion-row » et « ion-col », et dans cette rangée on va saisir un titre « h1 » à l’intérieur on va indiquer une interpolation de chaîne “{{ loadedRecipe.title }}”. Donc on sauvegarde nos modifications et on va jeter un coup d’oeil à notre fichier « recipe.model.ts » ou nous avons nos ingrédients et il serait bien de les afficher aussi dans notre fichier HTML, dans une nouvelle rangée dans lequel nous allons mettre un « ion-list » et à l'intérieur on va saisir « ion-item *ngFor=« let ig of loadedRecipe.ingredients» » afin de passer en revue l’ensemble des ingrédients en ajoutant une boucle et en dessous on va pouvoir saisir «  {{ ig }} », pour obtenir un résultat nous allons aussi modifier notre service et saisir un seul égal dans cette fonction car il n’y a pas d’opérateur logique, c’est une déclaration. Maintenant nous allons sauvegarder et on va observer le résultat apporté, rappelez-vous que nos identifiants de nos recettes sont « r1 » et « r2 » par conséquent, si on ajoute à la barre d’url « /r1 » nous devrions chargé la recette 1 et « /r2» avec l’ensemble des détails. Donc on obtient ce résultat, le style n’est pas trop mal, on peut faire quelques ajustements bien-sûr. Mais on veut s’assurer que notre titre n’indique pas le détail de la recette, mais indique en réalité le nom de la recette chargée. Donc on revient dans notre fichier HTML, dans notre « ion-title », et on va saisir « {{ loadedRecipe.title }} » et on va ajouter un « color=« primary » » dans notre « ion-toolbar ». Et si on sauvegarde, et on regarde ce que ça donne, cela ne semble pas trop mal. Nous allons maintenant centrer ici le titre, et nous assurer que notre image ici, cette colonne dans laquelle elle se trouve, n'a pas de remplissage. Donc on revient sur notre page HTML et à la balise « h1 », nous pouvons la centrer avec une balise HTML, « center ». Mais on ne veut pas uniquement centrer le texte. Sur notre « ion-col » comportant l’image, on ne veut pas de remplissage. Donc dans le « ion-col » on va indiquer « no-padding », et nous allons réduire la taille de l’image en saisissant « style=« width: 100px; height: 100px». Donc on sauvegarde nos modifications apportées, et on recharge notre page, on peut être satisfait de notre progression. Cependant, entrer l’URL à la main n’est pas vraiment ce que nous souhaitons. Alors comment pouvons-nous nous assurer que lorsque nous tapons sur cela, nous allons à la deuxième page ? C’est ce que nous allons voir dans la prochaine vidéo.