<ng container-> vs <template>

ng-container est mentionné dans Angulaire 2 de la documentation, mais il n'y a pas d'explication comment il fonctionne et quels sont les cas d'utilisation.

Il est notamment mentionné dans ngPlural et ngSwitch directives.

Ne <ng-container> faire la même chose que <template>, ou ça dépend si une directive a été écrit pour utiliser l'un d'eux?

Sont

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

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

censé être la même?

Comment choisir l'un d'eux?

Comment peut - <ng-container> être utilisé dans la coutume de la directive?

InformationsquelleAutor Estus Flask | 2016-09-17

232

Edit : Maintenant c'est documenté
<ng-container> à la rescousse

L'angle de <ng-container> est un élément de regroupement qui n'interfère pas avec les styles ou de mise en page, car Angulaire ne le mettez pas dans les DOM.

(...)

Le <ng-container> est une syntaxe de l'élément reconnu par l'angle de l'analyseur. Ce n'est pas une directive, d'un composant, une classe ou une interface. C'est plus comme les accolades dans un JavaScript si-bloc:
```
  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }
```
Sans les accolades, JavaScript serait seulement exécuter la première instruction lorsque vous avez l'intention d'exécuter conditionnellement tous comme un seul bloc. Le <ng-container> répond à un besoin similaire dans Angulaire modèles.
Réponse originale à cette question:

Selon ce pull request :

<ng-container> est un conteneur logique qui peut être utilisé pour les nœuds du groupe mais n'est pas rendu dans l'arborescence du DOM comme un nœud.

<ng-container> est rendu sous la forme d'un commentaire HTML.

donc ce angulaire modèle :
```
<div>
    <ng-container>foo</ng-container>
<div>
```
va produire ce genre de résultat :
```
<div>
    foo
<div>
```
Donc ng-container est utile lorsque vous souhaitez conditionaly ajouter un groupe d'éléments (c'est à dire à l'aide de *ngIf="foo") dans votre application, mais ne voulez pas de les emballer avec un autre élément.
```
<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>
```
produisent alors :
```
<div>
    <h2>Title</h2>
    <div>Content</div>
</div>
```
- C'est un bon point. Je suppose qu'il est différent de <template> quand il est utilisé sans directives. <template> serait seulement de produire des  dans ce cas.
- en fait, <template></template>produira <script></script> voir le
- Il n'était pas dans mon cas. Même si il n'y a <script> lors de la compilation, il est retiré par la suite, il n'y a pas de balises supplémentaires dans les DOM. Je crois que le manuel contient des informations obsolètes ou c'est juste tromper. De toute façon, merci pour la principale différence entre <ng container-> et <template>.
- Avant la libération, Angulaire rendu <script></script>. Il a été rendu quelque chose comme  pour un bon moment. La documentation sera bientôt corrigé.
InformationsquelleAutor n00dl3
38

La documentation (https://angular.io/guide/template-syntax#!#star-modèle) donne l'exemple suivant. Dire que nous avons modèle de code comme ceci:
```
<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>
```
Avant qu'il ne soit rendu, il sera de la "dé-sucrée". Qui est, l'astérix de notation sera transcrit à la notation:
```
<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>
```
Si 'currentHero' est truthy ce sera rendu comme
```
<hero-detail> [...] </hero-detail>
```
Mais que faire si vous voulez un conditionnelle de sortie comme ceci:
```
<h1>Title</h1><br>
<p>text</p>
```
.. et vous ne voulez pas que la sortie sera enveloppé dans un récipient.

Vous pouvez écrire le de-sucrées version directement comme ceci:
```
<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>
```
Et cela fonctionne très bien. Cependant, maintenant, nous avons besoin de ngIf d'avoir des crochets [] au lieu d'un astérisque *, et ceci est source de confusion (https://github.com/angular/angular.io/issues/2303)

Pour cette raison, une autre notation a été créé, comme suit:
```
<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>
```
Les deux versions produira les mêmes résultats (uniquement le h1 et p balise sera rendu). Le second est préféré parce que vous pouvez utiliser *ngIf comme toujours.
- Belle explication, il fournit une vue d'ensemble des Comment ng-container directive idée est venue, merci 🙂
InformationsquelleAutor Carlo Roosen
0

Omi cas d'utilisation pour ng-container sont de simples remplacements pour laquelle un modèle personnalisé/composant serait exagéré. Dans la doc API mention de la suite

utiliser un gn-conteneur pour regrouper plusieurs nœuds racines

et je suppose que c'est ce qu'il est tout au sujet de: groupement des choses.

Être conscient que la ng-container directive tombe de suite au lieu d'un modèle où sa directive encadre le contenu réel.
- Avez-vous un lien vers cette mention? Ne voir qu'il est utilisé dans le ci-dessus liés à la documentation et au pluriel cas de la documentation à l'instant: angulaire.io/docs/ts/latest/api/common/index/....
- angulaire.io/docs/ts/latest/api/common/index/...
- Merci, créé un problème à l'docs site concernant le manque de documentation et de référence à cette réponse: github.com/angular/angular.io/issues/2553
- La réponse n'est pas vraiment clair sur ce qu'est la différence de <template> qui sert le même but. FWIW, je pourrais faire ngPluralCase travailler avec <template ngPluralCase="=0">. Mais la manière de ce qui a été énoncé dans la question me donne Can't bind to 'ngPluralCase' since it isn't a known property of 'ng-container' dans la version finale. Pas sûr de ce que cela signifie.
- ngContainer est de l'omi d'un modèle prédéfini qui sert le seul et unique but de regrouper plusieurs nœuds racine. Il est hors de question que vous pouvez le faire avec votre propre modèle, mais avec le supplémentaire et inutile effort de la création et de l'enregistrement de votre propre composant. Quelque chose comme les accolades après une si-condition. Vous n'avez pas besoin d'eux, mais ils sont très pratique 🙂
- downvoted -1. gn-conteneur n'est pas d'éviter de prendre un modèle personnalisé, c'est être capable d'avoir de contenu conditionnel qui n'est pas enveloppé dans un récipient. En fait un modèle personnalisé va également introduire une enveloppe contenant, à savoir la directive de la balise elle-même.
- Vous avez absolument raison. C'est sûr que d'une différence qui doivent être mentionnés. J'ai ajouté l'allusion à mon post.
InformationsquelleAutor Matt
-1

Un cas d'utilisation pour lorsque vous souhaitez utiliser une table avec *ngIf et *ngFor - Que de mettre un div dans le document td/th vous faire l'élément de la table de mal se conduire -. J'ai été confronté à ce problème et que était la réponse.
- Mais la même chose peut être réalisé avec <template [ngIf]...>. La question était la différence entre ces deux approches.
- oh, mon mauvais, il semble être la réponse ici stackoverflow.com/questions/40529537/... ils sont tout simplement dire que c'est juste une différence de syntaxe
InformationsquelleAutor shakram02

Vous devez vous connecter pour publier un commentaire.

Edit : Maintenant c'est documenté

<ng-container> à la rescousse

Réponse originale à cette question:

`<ng-container>` à la rescousse