<page-data>
El componente <page-data> le permite imprimir parámetros de enrutamiento actuales, consultas de búsqueda o estado del historial directamente en HTML sin escribir selectores JavaScript.
html
<p>Viewing user ID: <page-data param="userId">unknown</page-data></p>Atributos
| Atributo | Tipo | Predeterminado | Descripción |
|---|---|---|---|
param | string | undefined | El nombre del parámetro de ruta a representar (por ejemplo, userId de /users/:userId). |
search-param | string | undefined | El nombre del parámetro de consulta de URL que se va a representar (por ejemplo, filter de ?filter=active). |
key | string | undefined | La ruta clave de notación de puntos que se mostrará desde la carga útil del estado del historial. |
Valores alternativos
Cualquier contenido incluido entre etiquetas <page-data> se trata como un valor de reserva predeterminado. Se representa solo si la propiedad solicitada es undefined o no está disponible:
html
<!-- Renders: "Guest" if role is empty -->
<p>Role: <page-data key="role">Guest</page-data></p>Resolución de clave profunda
Al pasar cargas útiles de historial complejo a través de <page-link>, utilice la notación de puntos en el atributo key para atravesar objetos anidados:
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>