O 'ng-container' é mencionado na documentação Angular 2 mas não há explicação de como funciona e o que são casos de utilização.
É particularmente mencionado nas directivas ngPlural' e ngSwitch'.
O <ng-container>
faz o mesmo que o <template>
, ou depende se foi escrita uma directiva para utilizar uma delas?
São
<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>
e
<template [ngPluralCase]="'=0'">there is nothing</template>
supostamente o mesmo?
Como escolhemos um deles?
Como pode o <ng-container>
ser utilizado na directiva personalizada?
<ng-container>
ao salvamentoThe Angular
<ng-container>
é um elemento de agrupamento que não't interfere com estilos ou layout porque Angular doesn't o coloca no DOM.
(...)
The
<ng-container>
é um elemento de sintaxe reconhecido pelo parser angular. It's não é uma directiva, componente, classe, ou interface. It's mais parecido com os suportes encaracolados num JavaScript if-block:if (algumaCondição) { declaração1; declaração2; declaração3; }
Sem essas chaves, o JavaScript só executaria a primeira declaração quando se pretende executar condicionalmente todas elas como um único bloco. The
<ng-container>
satisfaz uma necessidade semelhante em modelos angulares.
De acordo com este pedido de puxar:
<ng-container>
é um contentor lógico que pode ser utilizado para agrupar nós mas não é apresentado na árvore DOM como um nó.
<ng-container>
é apresentado como um comentário HTML.
portanto, este modelo angular:
<div>
<ng-container>foo</ng-container>
<div>
produzirá este tipo de produção:
<div>
<!--template bindings={}-->foo
<div>
Assim, o ng-container' é útil quando se pretende condicionar a adição de um grupo de elementos (ou seja, utilizando
ngIf="foo"`) na sua aplicação, mas don'não se pretende embrulhá-los com outro elemento.
<div>
<ng-container *ngIf="true">
<h2>Title</h2>
<div>Content</div>
</ng-container>
</div>
irá então produzir:
<div>
<h2>Title</h2>
<div>Content</div>
</div>
A documentação (https://angular.io/guide/template-syntax#!#star-template) dá o seguinte exemplo. Digamos que temos um código modelo como este:
<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>
Antes de ser entregue, será "dessugared". Ou seja, a notação asterix será transcrita para a notação notação:
<template [ngIf]="currentHero">
<hero-detail [hero]="currentHero"></hero-detail>
</template>
Se ' actualHero' é verdade que isto será apresentado como
<hero-detail> [...] </hero-detail>
Mas e se quiser uma produção condicional como esta?
<h1>Title</h1><br>
<p>text</p>
... e não'não quer que a saída seja embrulhada num contentor.
Poderia escrever a versão dessugarrada directamente como tal:
<template [ngIf]="showContent">
<h1>Title</h1>
<p>text</p><br>
</template>
E isto vai funcionar bem. Contudo, agora precisamos de ngIf para ter parênteses [] em vez de um asterisco *, e isto é confuso (https://github.com/angular/angular.io/issues/2303)
Por essa razão, foi criada uma notação diferente, como tal:
<ng-container *ngIf="showContent"><br>
<h1>Title</h1><br>
<p>text</p><br>
</ng-container>
Ambas as versões produzirão os mesmos resultados (apenas a etiqueta h1 e p será apresentada). A segunda é preferida porque se pode usar *ngIf como sempre.
As caixas de utilização "não contentor" são simples substituições para as quais um modelo/componente personalizado seria um exagero. No documento API, mencionam o seguinte
utilizar um contentor de ng para agrupar múltiplos nós de raiz
e acho que é disso'é disso que se trata: agrupar coisas.
Esteja ciente de que a directiva "não contentor" cai em vez de um modelo em que a sua directiva envolve o conteúdo real.