DoCow
  1. DoCow
  3. Como repetir um pedaço de HTML várias vezes sem ngFor e sem outro @Component
Intereting Posts
git –git-dir não está funcionando como esperado Como imprimir o conteúdo de um vetor? Por que uma function deve ter apenas um ponto de saída? Qual é a diferença entre And e And And no VB.NET? Como escrever um manipulador de sinais para capturar o SIGSEGV? Diferença entre SelectedItem, SelectedValue e SelectedValuePath O tipo de interoperabilidade não pode ser incorporado Como fazer solicitações HTTP assíncronas em PHP Destaque de Strings no TextFore do JavaFX unpivot e PostgreSQL Como detectar a presença de URL em uma string A necessidade de esconder o sal para um hash BigInteger equivalente no Swift? Como chamar methods dinamicamente com base no nome deles? O Docker não pode se conectar ao daemon do docker

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