Ionic - 8.12 Réservations glissables et modèle Booking
La page des réservations est encore vide. Cette leçon prépare son contenu : un modèle Booking, un service qui fournit des données factices et une liste glissable. Le bouton de suppression apparaît, mais sa logique reste à écrire dans une prochaine étape.
Créer le modèle et le service
Un fichier modèle décrit l'objet Booking. Le constructeur reçoit un identifiant, l'identifiant du lieu, celui de l'utilisateur, le titre du lieu et le nombre de voyageurs. Tous les champs sont publics : ils sont de type chaîne, sauf le nombre de voyageurs, qui est un nombre.
Le service Booking est injectable à la racine du projet, ce qui le rend accessible partout. Il contient un tableau privé de réservations, rempli avec des valeurs factices. La méthode getBookings renvoie ce tableau.
@Injectable({
providedIn: 'root'
})Afficher les réservations dans une liste
La page des réservations injecte le service dans son constructeur, puis stocke les réservations dans une variable. Le HTML supprime le padding par défaut, puis utilise une grille avec une colonne de taille 6 en medium, décalée de 3.
Chaque réservation est un ion-item-sliding qui contient un titre en h3 et un paragraphe indiquant le nombre de voyageurs. Un ion-label encadre ces éléments.
Ajouter le bouton de suppression
Une ion-item-option de couleur danger affiche une icône de poubelle, en mode icon-only. Le clic appelle une méthode avec l'identifiant de la réservation et la référence de l'élément glissant.
La méthode ferme l'élément avec close. La suppression réelle n'est pas encore codée, car elle demande davantage de logique.
onCancelBooking(bookingId: string, slidingElement: IonItemSliding) {
slidingElement.close();
}En résumé
La page des réservations s'appuie sur un modèle Booking et un service qui fournit des données factices. Chaque réservation s'affiche dans un élément glissant, avec une option de suppression. La méthode actuelle ferme seulement l'élément, et la suppression réelle reste à implémenter.
Points clés
- Le modèle Booking décrit une réservation.
- Le service Booking est injectable à la racine du projet.
- Une liste glissable affiche chaque réservation.
- L'option poubelle appelle onCancelBooking avec l'identifiant.
- La suppression réelle n'est pas encore codée.
Questions fréquentes
Que fait le réglage providedIn root ?
Il rend le service accessible partout dans le projet, sans l'enregistrer dans chaque module.
Que fait le bouton poubelle pour l'instant ?
Il referme l'élément glissé. La vidéo précise que la suppression n'est pas encore codée.
Pourquoi passer la référence de l'élément à la méthode ?
La méthode a besoin de cet élément pour le fermer après le clic.