<page-data>
O componente <page-data> permite exibir parâmetros de roteamento, consultas ou o estado do histórico diretamente no HTML, sem escrever seletores JavaScript.
html
<p>Viewing user ID: <page-data param="userId">unknown</page-data></p>Atributos
| Atributo | Tipo | Padrão | Descrição |
|---|---|---|---|
param | string | undefined | Nome do parâmetro de caminho a renderizar (por exemplo, userId de /users/:userId). |
search-param | string | undefined | Nome do parâmetro de consulta da URL a renderizar (por exemplo, filter de ?filter=active). |
key | string | undefined | Caminho da chave em notação de ponto a exibir a partir do estado do histórico. |
Valores alternativos
Qualquer conteúdo entre as tags <page-data> é tratado como valor alternativo padrão. Ele só é renderizado se a propriedade solicitada for undefined ou estiver indisponível:
html
<!-- Renders: "Guest" if role is empty -->
<p>Role: <page-data key="role">Guest</page-data></p>Resolução profunda de chaves
Ao passar estados complexos do histórico por <page-link>, use a notação de ponto no atributo key para percorrer objetos aninhados:
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>