web-dev-qa-db-fra.com

<conteneur-ng> vs <modèle>

ng-container est mentionné dans la documentation Angular 2, mais il n’explique pas comment cela fonctionne et quels sont les cas d’utilisation.

Il est particulièrement mentionné dans les directives ngPlural et ngSwitch .

Est-ce que <ng-container> fait la même chose que <template> ou est-ce que cela dépend si une directive a été écrite pour utiliser l'un d'eux?

Sont

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

et

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

censé être le même?

Comment choisit-on l'un d'entre eux?

Comment <ng-container> peut-il être utilisé dans une directive personnalisée?

angulartypescriptangular2-template
118
estus

Edit: Maintenant c'est documenté

<ng-container> à la rescousse

Le <ng-container> angulaire est un élément de regroupement qui n'interfère pas avec les styles ni la présentation, car Angular ne le met pas dans le DOM.

(...)

Le <ng-container> est un élément de syntaxe reconnu par l'analyseur angulaire. Ce n'est pas une directive, un composant, une classe ou une interface. Cela ressemble plus aux accolades d'un JavaScript if-block:

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

Sans ces accolades, JavaScript n'exécuterait la première instruction que si vous avez l'intention de les exécuter de manière conditionnelle en un seul bloc. Le <ng-container> répond à un besoin similaire dans les modèles angulaires.

Réponse originale:

Selon cette demande d'extraction :

<ng-container> est un conteneur logique qui peut être utilisé pour regrouper des nœuds mais n'est pas rendu dans l'arborescence DOM en tant que nœud.

<ng-container> est rendu sous forme de commentaire HTML.

donc ce gabarit angulaire:

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

produira ce type de sortie: 

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

Donc, ng-container est utile lorsque vous souhaitez ajouter de manière conditionnelle un groupe d’éléments (par exemple, en utilisant *ngIf="foo") dans votre application mais que ne souhaitez pas les envelopper avec un autre élément.

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

produira alors:

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>
201
n00dl3

La documentation ( https://angular.io/guide/template-syntax#!#star-template ) donne l'exemple suivant. Disons que nous avons un code de modèle comme celui-ci:

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

Avant qu'il ne soit rendu, il sera "dépouillé". C'est-à-dire que la notation astérisque sera transcrite en notation:

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

Si 'currentHero' est la vérité, cela sera rendu comme 

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

Mais si vous voulez une sortie conditionnelle comme celle-ci:

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

.. et vous ne voulez pas que la sortie soit emballée dans un conteneur.

Vous pouvez écrire la version sans sucre directement comme ceci:

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

Et cela fonctionnera bien. Cependant, nous avons maintenant besoin de ngIf entre crochets [] au lieu d’un astérisque *, ce qui prête à confusion ( https://github.com/angular/angular.io/issues/2303 )

Pour cette raison, une notation différente a été créée, comme suit:

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

Les deux versions produiront les mêmes résultats (seules les balises h1 et p seront rendues). Le second est préférable car vous pouvez utiliser * ngIf comme toujours. 

34
Carlo Roosen

Les exemples d’utilisation pour ng-container sont de simples remplacements pour lesquels un modèle/composant personnalisé serait excessif. Dans le document API, ils mentionnent ce qui suit 

utiliser un conteneur ng pour regrouper plusieurs nœuds racine

et je suppose que c'est ce dont il s'agit: grouper des choses.

Sachez que la directive ng-container tombe au lieu d’un modèle dans lequel sa directive enveloppe le contenu réel.

0
Matt