variable - template tag angular 2




<contêiner> vs<modelo> (3)

ng-container é mencionado na documentação do Angular 2, mas não há explicação sobre como ele funciona e quais são os casos de uso.

É particularmente mencionado nas ngPlural e ngSwitch .

O <ng-container> faz o mesmo que o <template> , ou depende de uma diretiva ter sido escrita para usar um deles?

Estão

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

e

<template [ngPluralCase]="'=0'">there is nothing</template>

deveria ser o mesmo?

Como escolhemos um deles?

Como o <ng-container> ser usado na diretiva personalizada?


Edit: Agora está documented

<ng-container> para o resgate

O <ng-container> Angular é um elemento de agrupamento que não interfere nos estilos ou no layout, porque o Angular não o coloca no DOM.

(...)

O <ng-container> é um elemento de sintaxe reconhecido pelo analisador Angular. Não é uma diretiva, componente, classe ou interface. É mais como as chaves em um bloco if do JavaScript:

  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }

Sem essas chaves, o JavaScript só executaria a primeira instrução quando você pretender executar todas elas condicionalmente como um único bloco. O <ng-container> satisfaz uma necessidade semelhante nos modelos angulares.

Resposta original:

De acordo com esta solicitação de recebimento :

<ng-container> é um contêiner lógico que pode ser usado para agrupar nós, mas não é renderizado na árvore DOM como um nó.

<ng-container> é renderizado como um comentário HTML.

então este modelo angular:

<div>
    <ng-container>foo</ng-container>
<div>

produzirá este tipo de saída:

<div>
    <!--template bindings={}-->foo
<div>

Portanto, ng-container é útil quando você deseja anexar condicionalmente um grupo de elementos (por exemplo, usando *ngIf="foo" ) em seu aplicativo, mas não deseja agrupá-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 ) fornece o seguinte exemplo. Digamos que temos um código de modelo como este:

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

Antes de ser processado, será "sem açúcar". Ou seja, a notação asterix será transcrita para a notação:

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

Se 'currentHero' for verdade, isso será renderizado como

<hero-detail> [...] </hero-detail>

Mas e se você quiser uma saída condicional como esta:

<h1>Title</h1><br>
<p>text</p>

.. e você não deseja que a saída seja embrulhada em um contêiner.

Você pode escrever a versão sem açúcar diretamente assim:

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

E isso vai funcionar bem. No entanto, agora precisamos do ngIf para ter colchetes [] em vez de um asterisco *, e isso é confuso ( https://github.com/angular/angular.io/issues/2303 )

Por esse motivo, uma notação diferente foi criada, assim:

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>

Ambas as versões produzirão os mesmos resultados (somente a tag h1 ep será renderizada). O segundo é o preferido, porque você pode usar * ngIf como sempre.


Um caso de uso para isso quando você deseja usar uma tabela com * ngIf e * ngFor - Como colocar uma div em td / th fará com que o elemento da tabela se comporte mal -. Eu enfrentei esse problema e that foi a resposta.





angular2-template