O problema é simples, eu quero repetir um pedaço de HTML, várias vezes no meu modelo.
Mas eu quero que isso seja repetido em diferentes lugares da minha página, isso significa que um ngFor não é a solução, pois as peças seriam repetidas diretamente uma após a outra.
Uma ‘solução de trabalho’ seria definir um @Component específico para meu HTML repetido e fazer algo assim:
Whatever html
Mas eu acho que é um exagero criar um componente dedicado para fazer algo assim, como nenhum significado funcional e é requerido apenas pela estrutura html que eu quero configurar.
Não há realmente nada no mecanismo de modelo ng2 para permitir definir um “modelo interno” e usá-lo sempre que eu precisar dele no modelo atual?
Se a resposta for não, eu prefiro duplicar o HTML, mesmo que isso seja uma droga.
atualizar o Angular 5
ngOutletContext
foi renomeado para ngTemplateOutletContext
Veja também https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
O recentemente adicionado ngTemplateOutlet pode ser o que você quer
Atualmente, ele pode ser usado como
{{self | json }}
Um modelo também pode ser passado para um componente filho para ser renderizado lá
@Component({ selector: 'some-child', providers: [], template: `
`, directives: [] }) export class Child { @ContentChild(TemplateRef) template:TemplateRef; }Child
para ser usado como
{{self | json }}
exemplo de stackblitz
Outro exemplo de Plunker
que usa dados passados como
Desta forma
ngOutletContext
pode ser usado no modelo como{{image}}
onde
image
é uma propriedade detemplateData
Se
$implicit
é usado
o
ngOutletContext
pode ser usado no modelo como{{item}}
{{item.blockName}}
e no componente rx:
prestar atenção em:
[ngOutletContext]="{$implicit: item}"
assim como