IONIC Section 5 - 5.16 Components Angular vs components Ionic

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, maintenant que nous avons ajouter notre contrôleur d’alerte, nous en sommes presque au point. L’un des éléments que je souhaite vous montrer, simplement pour bien comprendre comment cela fonctionne. Evidemment, dans ce projet Angular, vous pouvez toujours créer vos components Angular normaux que vous utilisez avec leurs sélecteurs dans vos modèles, de sorte que vous ne puissiez pas uniquement générer des pages avec des components Angular, vous pouvez toujours les utiliser comme vous les utilisez dans tout projet Angular. Donc, on peut utiliser à nouveau « ionic generate» et comme vous le verrez, en plus de pouvoir créer une page, on peut maintenant créer un component, alors allons-y, on peut écrire « recipes/recipe-item». Maintenant, nous allons saisir le code d’ion-item dans notre fichier « recipes.page.html» et l’ajouter dans notre nouveau component, et plus précisément dans notre fichier « recipe-item.component.html». Ce qu’il faut retenir, c’est que cela ne sera pas rendu comme une page Ionic. On ne veut pas avoir « ngFor» sur cet article donc on va le supprimer, mais plutôt dans notre « recipe-item.component.ts», on veut une propriété qu’on va insérer dans notre export « @Input() recipeItem: Recipe;» en l’important avec « import { Recipe } from ‘../recipes.model’;». Donc se sera une recette de type et vous devez donc importer une recette à partir du fichier de modèle de recette et cela pourrait être lié de l’exterieur. Comment ça marche dans Angular ? Vous ajoutez bien « @Input()» sans oublier de l’importer avec « @angular/core». Vous pouvez donc continuer à construire ces components Angular normaux avec des entrées, des sorties, etc… Ici, nous utilisons une entrée et rendons un élément de recette pouvant être lié de l’extérieur. Par conséquent, dans notre fichier HTML, on peut utiliser dans le « routerlink», « recipeItem.id» également dans notre image et notre label. Alors, maintenant, dans notre fichier « recipes.module.ts», nous allons référé notre nouveau component en la déclarant « RecipeItemComponent» et dans notre fichier « recipes.page.html», nous pouvons utiliser « app-recipe-item», c’est à dire le sélecteur du component créé et tout ce que nous avons à faire c’est de transmettre une valeur en parcourant nos recettes avec « *ngFor=« let recipe of recipes»» puis « [recipeItem]=« recipe»». Et si on sauvegarde tout cela, notre appli devrait maintenant rebuild et fonctionner maintenant comme avant. Ici, nous avons toujours nos articles et nous pouvons toujours les consulter. Donc, cela marche comme avant et je vous le montre tout simplement parce que je veux vraiment m’assurez que vous comprenez qu’il s’agit d’un projet Angular normal et que vous pouvez build des components Angular comme vous êtes habitué. Et en effet, si vous comparez des components Angular et des components Ionic, vous verrez que vous les utilisez de la même manière dans votre projet Angular. Bien entendu, les components Angular sont crées par vous avec @component ou vous importez une librairie et en fait, @ionic/angular, ce package englobe à la fin tous les components de la bande Ionic dans des components Angular. Donc techniquement, se sont encore des components Angular à présent, dans son noyau il a encore des components web. Nous créons donc nos propres components avec @component, nous les utilisons dans nos modèles Angular et c’est le seul endroit où nous pouvons les utiliser. Angular les rendra au DOM pour nous qui rendra de leurs modèles au DOM. Cependant, nous ne pouvons utiliser que des components Angular dans une application Angular. Les components Ionic prédéfinit sont open-source mais vous ne pouvez pas les éditer, ils ne vous permettront pas de fusionner vos modifications dans le référentiel Ionic sans aucune raison. Les components Ionic utilisent les technologies web natives. Ce sont des components web. Oui, ils sont entourés ci par @ionic/angular, mais dans son noyau, il y a toujours des components web et vous pouvez donc utiliser ces components web n’importe où, dans n’importe quel projet, pas seulement à l’intérieur des applications Angular. J’espère que c’est assez clair pour vous désormais, cette vidéo touche à sa fin, je vous donne rendez-vous pour la prochaine.