DoCow
  1. DoCow
  3. Como repetir um pedaço de HTML várias vezes sem ngFor e sem outro @Component
Intereting Posts
Gradle sempre faz println de qualquer tarefa Retorna o valor da function com uma chamada Ajax Como medir um tempo gasto em uma página? Como criar um arquivo .jar ou exportar jar no IntelliJ (como eclipse java archive export) Verifique a largura e a altura da imagem antes de carregar com Javascript Erro de compilation externo VS2013 “erro MSB4019: o projeto importado não foi encontrado” JavaScript: upload de arquivo Jquery Ajax Carregando a imagem Extensões Git: Win32 error 487: Não foi possível reservar espaço para o heap do cygwin, erro Win32 0 Use transições CSS3 com fundos gradientes Script em lote: como verificar os direitos de administrador Formatar TimeSpan maior que 24 horas Como funciona o laço Java ‘for each’? URLConnection não segue o redirecionamento Código do Entity Framework primeiro. Encontrar chave primária

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