como usar o Ng-Template em Angular?

ng-template é um elemento Angular usado para desenhar modelos HTML.

We use ng-template with angular *ngIf directive to display else template.

So what exactly this ng-template will do?

Se realmente torna modelo HTML, veremos com um exemplo.

<div> ng-template works!</div><ng-template>Inside ng-template tag</ng-template>

Se você ver o resultado irá apresentar apenas ng-template works que está no elemento div.E dê uma olhada no código fonte HTML gerado.

hellong-modelo exemplo

pode ver uma secção de comentários vazia em vez de ng-template tag. Vamos entrar profundamente em ng-template para entender este comportamento.

o Que é gn-modelo Angular

  1. ng-template é um elemento virtual e seu conteúdo é exibido apenas quando necessário (baseado em condições).
  2. ng-template deve ser utilizado juntamente com directivas estruturais como, ou directivas estruturais personalizadas.É por isso que no exemplo acima o conteúdo de ng-template não são exibidos.
  3. ng-template never meant to be used like other HTML elements. É uma implementação interna das directivas estruturais da Angular.quando usar uma directiva estrutural em Angular, adicionaremos um asterisco prefixo (*) antes do nome da Directiva. Este asterisco é uma notação de mão curta para ng-template.
  4. sempre que o encontro Angular com o símbolo asterisco (*), estamos informando Angular dizendo que é uma diretiva estrutural e Angular irá converter o atributo diretiva para ng-template elemento.
  5. ng-template não é exatamente um elemento verdadeiro da web. Quando compilarmos o nosso código, não veremos uma etiqueta ng-template tag no DOM HTML.
  6. Angular will evaluate the ng-template element to convert it into a comment section in HTML DOM.

Vamos passar por diferentes estruturais directivas, como *ngIf*ngFor e para entender isso melhor.

Usando ng-modelo com *ngIf exemplo

Tomar um examle de *ngIf directiva Angular

<div *ngIf="display" class="ng-template-example"> ng-template example</div><ng-template ="display"> <div class="ng-template-example">ng-template example</div></ng-template>
  • A diretiva a ser convertido para o membro de dados de ng-template
  • inline elemento de modelo, juntamente com os atributos (de classe, etc.), movido dentro de ng-template o elemento

Então, nós temos apenas then modelo, que é uma linha de modelo e não há nenhum else modelo.Now will dig into the source code of NgIf Class to understand how ng-template element will work.

oláNgIf Código-Fonte e ng-modelo

em Qualquer estrutura directiva Angular terá duas propriedades

  1. TemplateRef
  2. ViewContainerRef

estrutural directiva cria a vista a partir de ng-template e o insere no contentor de vista adjacente a directiva elemento de host.

o Que significa estruturais directiva acessar o conteúdo de ng-template através de TemplateRef e atualiza o ViewContainerRef

TemplateRef é o nome da classe e ng-template é o correspondente tag de HTML

E se você ver o código fonte acima de NgIf classe possui quatro propriedades

  1. _thenTemplateRef : ng-template referência de, em seguida,
  2. _elseTemplateRef : ng-template referência de pessoa
  3. _thenViewRef : exibição inserida ref, em seguida,
  4. _elseViewRef : exibição inserida ref de pessoa

Se você veja o construtor tem dois parâmetros private _viewContainer: ViewContainerRef and _templateRef: TemplateRef<NgIfContext>

Construtor irá acessar o ng-template por templateRef parâmetro e atribuí-lo thenTemplateRef. o modelo incorporado será o modelo predefinido na Directiva ngIf.

no exemplo acima que não estamos passando qualquer pessoa, ou então modelos e a única entrada que estamos dando é

com Base na condição estamos a actualizar a vista. Ver o código fonte de updateView() método de NgIf classe.

oláNgIf Atualização de Vista e ng-modelo

Na atualização de vista de método Angular irá atribuir thenViewRef embedded modo de exibição criado a partir de thenTemplateRef eu.e, vista a partir de ng-template

Então, se a condição display for verdadeira página da web exibe I am Visible.

olángIf seção de comentários

E Se você ver o HTML gerado ng-template que está sendo convertida para uma seção de comentários, o que dá a informação sobre a condição avaliada.

Se a gente passar else modelo via que está sendo atribuído a elseTemplateRef

Se a condição for false updateView() método Angular irá atribuir elseViewRef embedded modo de exibição criado a partir de elseTemplateRef

olángIfElse ng-modelo

E nós pode alterar dinamicamente pessoa, ou então modelos de tempo de execução, atualizando e modelo de referências

Usando ng-modelo com *ngFor exemplo

Você pode estar pensando que por isso precisa usar o asterisco(*) Notação quando podemos usar o elemento ng-template diretamente. Yes We can use ng-template instead of short hand notation.

*ngIf é uma diretiva simples sem muita complexidade. Esta notação asterisco ou microsyntax (em termos angulares) é muito útil para diretivas estruturais complexas como *ngFor. Dê uma olhada no exemplo abaixo

<div *ngFor="let task of tasks; let i=index; let even=even; trackBy: trackById"> ({{i}}) {{task.name}}</div><ng-template ngFor let-task ="tasks" let-i="index" let-even="even" ="trackById"><div>({{i}}) {{task.name}}</div></ng-template>

com a notação asterisco ou Microsyntax Angular podemos dar instruções à diretiva em formato de cadeia simples. And Angular microsyntax parser convert that string into the attributes of ng-template as shown above

I dont want to get into the implementation details of*ngFor. Tudo o que precisamos entender é asterisco (*) Notação fácil de escrever e entender.

Até que a menos que você tenha uma boa razão, preferem asterisco(*) notação em vez de ng-template

Usando ng-modelo com NgSwitch exemplo

NgSwitch não é uma única directiva é, na verdade, é usado junto com outras diretivas *ngSwitchCase e *ngSwitchDefault

Ter um olhar para o abaixo ngSwitch exemplo

<div ="Course"> <p *ngSwitchCase="'Angular'">Angular Course</p> <p *ngSwitchCase="'TypeScript'">TypeScript Course</p> <p *ngSwitchCase="'JavaScript'">JavaScript Course</p> <p *ngSwitchDefault>HTML Course</p> </div><div ="Course"> <ng-template *ngSwitchCase="'Angular'"> <p>Angular Course</p> </ng-template> <ng-template ="'TypeScript'"> <p>TypeScript Course</p> </ng-template> <ng-template ="'JavaScript'"> <p>JavaScript Course</p> </ng-template> <ng-template > <p>HTML Course</p> </ng-template></div>

Se você ver o código acima eu não usei asterisco antes de ngSwitch porque, NgSwitch não é um estruturais directiva. É uma directiva de atributos.

NgSwitch controla o comportamento das outras duas diretivas de switch ngSwitchCaseengSwitchDefault.

ambosngSwitchCasengSwitchDefault são directivas estruturais que é por isso que eu usei asterisco antes deles. E estes serão convertidos para ng-template elementos

resumo

espero que entenda o que é ng-template em Angular e porque é útil. E se você está escrevendo você próprio estruturais directivas você deve ter uma ideia clara sobre o ng-template>

No meu próximo artigo vou explicar como escrever um personalizado estruturais directiva com a ajuda de ng-template

Deixe uma resposta

O seu endereço de email não será publicado.