Como repetir um pedaço de HTML várias vezes sem ngFor e sem outro @Component

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

Whatever

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

   

Um modelo também pode ser passado para um componente filho para ser renderizado lá

 @Component({ selector: 'some-child', providers: [], template: ` 

Child

`, directives: [] }) export class Child { @ContentChild(TemplateRef) template:TemplateRef; }

para ser usado como

    

exemplo de stackblitz

Outro exemplo de Plunker
que usa dados passados ​​como

 

Desta forma ngOutletContext pode ser usado no modelo como

  

onde image é uma propriedade de templateData

Se $implicit é usado

 

o ngOutletContext pode ser usado no modelo como

  
   

e no componente rx:

 
  • prestar atenção em:

    [ngOutletContext]="{$implicit: item}"

    assim como