Création d’un composant enfant et interaction avec celui-ci
Notre base de code s’est bien enrichie au fil des étapes précédentes. Prenons maintenant un instant pour refactoriser notre composant Liste d’ours en plusieurs composants plus petits. Nous allons déplacer le code des vignettes d’ours dans un nouveau composant.
Création du composant des vignettes d’ours
- Dans VS Code, faites un clic droit sur le dossier
lwc
et cliquez sur SFDX: Create Lightning Web Component (SFDX : Créer un composant Web Lightning). - Donnez un nom au composant
bearTile
. - Ouvrez
bearList.html
et coupez tout le code entre<!-- Start bear tile -->
et<!-- End bear tile -->
. - Collez le code entre les balises
template
debearTile.html
. Une fois que vous aurez terminé, votre fichierbearTile.html
doit ressembler à ceci. - Remplacez le contenu de
bearTile.js
par : Nous avons ajouté une propriétébear
décorée avec@api
. Cela expose la propriétébear
à n’importe quel composant parent. - Supprimez
bearList.css
. - Créez un dossier
bearTile.css
dans le répertoirebearTile
et collez-y le code suivant. - Ouvrez
bearList.html
et remplacez le contenu entre les commentaires<!-- Start bear tile -->
et<!-- End bear tile -->
par<c-bear-tile bear={bear}></c-bear-tile>
. Une fois que vous avez terminé, votre fichierbearList.html
doit ressembler à ceci. Cela fait référence à notre composant de vignette d’ours avec l’attributbear
que nous avons défini dans les étapes précédentes. Notez que le dossier et les fichiers de notre composant sont nommésbearTile
, mais que la balise que nous avons ajoutée estc-bear-tile
. Lec
initial représente l’espace de noms par défaut, suivi du nom du composant en minuscules, avec des tirets séparant les lettres majuscules. - Déployez le code mis à jour dans l’organisation et testez votre nouveau composant de liste. Il devrait avoir meilleure allure, avec un dégradé subtil.
Interactions avec le composant Liste d’ours
Les gardes forestiers veulent pouvoir consulter rapidement l’enregistrement d’un ours et le modifier sans avoir à quitter la page d’accueil. Nous allons donc leur donner la possibilité de cliquer sur les vignettes d’ours pour ouvrir un formulaire d’enregistrement d’ours modifiable.
- Modifiez
bearTile.html
et ajoutez le code suivant après la balise<lightning-card title={bear.Name} class="bear-tile">
. Nous avons ajouté un bouton Modifier qui déclenche la fonctionhandleOpenRecordClick
. Le bouton est placé sur la carte Lightning à l’aide de l’emplacementactions
. Un emplacement est un espace réservé pour le balisage qu’un composant parent transmet dans le corps d’un composant. - Modifiez
bearTile.js
et ajoutez la fonction suivante avant la dernière accolade fermante. Points marquants du code :- La fonction
handleOpenRecordClick
est déclenchée lorsqu’un utilisateur clique sur le bouton d’ouverture de l’enregistrement à partir d’une vignette d’ours. - La fonction crée et déclenche un événement
bearview
personnalisé qui contient l’identifiant de l’enregistrement de l’ours.
- La fonction
- Modifiez
bearList.html
et ajoutez un attributonbearview={handleBearView}
à la balisec-bear-tile
. Cela nous permet de capter l’événementbearview
déclenché par le composant de vignette. L’événement est géré dans une fonctionhandleBearView
.
- Remplacez le contenu de
bearList.js
par : Points marquants du code :- Nous importons un mixin de navigation qui regroupe des fonctions utilitaires traitant de la navigation. Un mixin nous permet d’ajouter des fonctionnalités à une classe sans l’étendre. Cela est utile lorsqu’une classe étend déjà une classe parent (une classe ne peut étendre qu’un seul parent).
- Notre classe étend le mixin de navigation appliqué à la classe de base
LightningElement
. - Nous gérons l’événement
bearview
dans la fonctionhandleBearView
. Nous extrayons l’identifiant de l’enregistrement d’ours du détail de l’événement et nous utilisons le mixin de navigation pour naviguer vers une page d’enregistrement d’ours.
- Déployez le code mis à jour dans l’organisation et essayez d’accéder à un enregistrement d’ours avec l’icône de bouton sur une vignette.
C’est tout pour cette étape. Nous avons refactorisé notre composant en deux composants plus petits : la liste d’ours et une vignette d’ours. Nous avons vu comment communiquer du composant de liste parent vers le composant de vignette enfant avec un décorateur @api
. Nous avons également vu comment communiquer d’un enfant vers un parent avec un événement personnalisé.
Dans l’étape suivante, nous verrons comment interagir avec d’autres composants dans une page Lightning.