Tenho dois componentes: pai e filho, com a seguinte marcação. É vital para este exemplo que o filho busque seus próprios dados para renderizar e eles não devem ser fornecidos pelos pais. Como está projetado agora, funciona como deveria.
O pai .
<h1>I'm the papa</h1>
<app-lookup>
<div>Some fixed content</div>
<div>Some dynamic content (soon)</div>
</app-lookup>
A criança .
<h1>I'm the sonny</h1>
<div *ngFor="let item of items">
<span>{{item.name}}</span>
<span>{{item.value}}</span>
</div>
<div>Total: {{items.count}}</div>
<ng-content></ng-content>
Nesta fase, percebi que não sei como transformar algo que é interno na criança como parte do conteúdo transmitido pelos pais. No exemplo acima, o total é apresentado (quando é repetido a partir de uma solicitação HTTP assinada). Mas eu gostaria de controlar como ele é apresentado, passando um modelo para a criança.
Desejo, pseudocódigo (não funciona, naturalmente, já que itemsnão existe no pai) seria isso.
<h1>I'm the papa</h1>
<app-lookup>
<div>Some fixed content</div>
<div>The cool total: {{items.count}}</div>
</app-lookup>
Não posso usar @Input/@Outputporque quero encapsular os dados no filho. Encontrei vários blogs sobre conteúdo infantil e sobre troca de dados . Mas não consegui encontrar um que ilustre como passar um modelo para ser renderizado com os campos filhos. Naturalmente, o pai precisa adivinhar os nomes dos campos. Estou bem com isso (e caso não estejam presentes, simplesmente não exibirei nada.
Você pode usar uma variável de referência de modelo (chamei de "dados" para deixar a aparência mais confortável)
NOTA, realmente não gosto muito porque você força conhecer as propriedades da criança