<page-data>
Le composant <page-data> vous permet d'imprimer les paramètres de routage actuels, les requêtes de recherche ou l'état de l'historique directement dans HTML sans écrire de sélecteurs JavaScript.
html
<p>Viewing user ID: <page-data param="userId">unknown</page-data></p>Attributs
| Attribut | Tapez | Par défaut | Descriptif |
|---|---|---|---|
param | string | undefined | Le nom du paramètre de chemin à restituer (par exemple userId à partir de /users/:userId). |
search-param | string | undefined | Le nom du paramètre de requête URL à restituer (par exemple filter à partir de ?filter=active). |
key | string | undefined | Chemin d’accès clé de notation par points à afficher à partir de la charge utile de l’état de l’historique. |
Valeurs de repli
Tout contenu encapsulé entre les balises <page-data> est traité comme une valeur de secours par défaut. Il est rendu uniquement si la propriété demandée est undefined ou indisponible :
html
<!-- Renders: "Guest" if role is empty -->
<p>Role: <page-data key="role">Guest</page-data></p>Résolution de clé profonde
Lors du transfert de charges utiles d'historique complexes via <page-link>, utilisez la notation par points dans l'attribut key pour parcourir les objets imbriqués :
html
<!-- Navigation link -->
<page-link path="/dashboard" payload='{"user": {"profile": {"name": "Elson"}}}'>
Dashboard
</page-link>
<!-- Extraction -->
<h3>Welcome, <page-data key="user.profile.name">Guest</page-data></h3>