<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>
et
<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?
Vous devez vous connecter pour publier un commentaire.
Edit : Maintenant c'est documenté
Réponse originale à cette question:
Selon ce pull request :
donc ce angulaire modèle :
va produire ce genre de résultat :
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.produisent alors :
<template>
quand il est utilisé sans directives.<template>
serait seulement de produire des<!--template bindings={}-->
dans ce cas.<template></template>
produira<script></script>
voir le<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>.<script></script>
. Il a été rendu quelque chose comme<!--template bindings={}-->
pour un bon moment. La documentation sera bientôt corrigé.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:
Avant qu'il ne soit rendu, il sera de la "dé-sucrée". Qui est, l'astérix de notation sera transcrit à la notation:
Si 'currentHero' est truthy ce sera rendu comme
Mais que faire si vous voulez un conditionnelle de sortie comme ceci:
.. 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:
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:
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.
ng-container
directive idée est venue, merci 🙂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 suiteet 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.<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 donneCan'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.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.
<template [ngIf]...>
. La question était la différence entre ces deux approches.