IONIC Section 5 - 5.15 Injecter des contrôleurs Ionic

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

Bonjour à tous, maintenant que nous avons vu les détails concernant le debugging, nous allons pouvoir améliorer notre mise en page. Disons que nous voulons demander à l’utilisateur s’il veut vraiment supprimer la recette avant que ce le soit. Et donc, dans notre fichier « recipe-detail.page.ts », sur cette page, nous souhaitons afficher une alerte. Maintenant, comme je l’ai mentionné, nous n’incluons plus le controller d’alert Ionic dans notre template, puis nous le sélectionnons avec un code JavaScript. On va pouvoir l’injecter directement dans notre constructor avec « private alertCtrl : AlertController » et qui doit également être importé avec « import { AlertController } from ‘@ionic/angular’ ». Donc on peut utiliser ce service pour créer une alerte et dans notre fonction « onDeleteRecipe() », on saisit « this.alertCtrl.create({header: ‘Etes-vous sûr ?’, message:’Voulez-vous vraiment supprimer cette recette ?’, buttons: [{ text: ‘Retour’, role: ‘retour’}, { text: ‘Supprimer’} ] }); ». Donc nous avons ajouté un « header » indiquant un message en en-tête demandant à l’utilisateur s’il est sûr de vouloir supprimer la recette. Nous ajoutons par la suite des boutons afin de donner à l’utilisateur la possibilité de répondre. Ainsi, les boutons ici ne seront pas simplement un tableau on va simplement mettre « d’accord » mais nous pouvons passer un objet pour configurer un bouton avec un texte, un rôle et un gestionnaire.  Puis nous allons ajouter « .then(alert => { alert.present();}); ». Maintenant « create » renvoie une promesse qui nous donne réellement cet élément d’alerte, cela n’a pas changé et nous pouvons ensuite appeler « alertEl.present ». Maintenant, on veut supprimer si ce bouton est enclenché, et pour cela, on va saisir en dessous de « text: ‘Supprimer ’, », « handler: () => «  en saisissant le code qui doit être exécutée. Et c’est tout ce dont nous avons besoin avec ce controller d’alertes en cours d’injection, et donc si on sauvegarde nos modifications et qu’on retourne sur notre application et que nous allons sur une recette pour la supprimée, nous recevons cette alerte intéressante. Si je clique sur « Retour », rien ne se passe mais si je clique sur supprimer, nous allons de l’avant, nous supprimons ceci quand nous revenons sur la page d'accueil. Donc cela fonctionne et c’est un autre avantage d’utiliser Ionic avec Angular, nous avons eu un accès très facile à ce contrôleur d’alertes et nous pouvons l’injecter partout où nous voulons afficher une alerte. Cette vidéo touche à sa fin, on se retrouve pour la prochaine.