Bearbeiten: Jetzt ist es dokumentiert
<ng-container>
zur Rettung
Der Angular <ng-container>
ist ein Gruppierungselement, das Stile oder Layouts nicht beeinträchtigt, da Angular es nicht in das DOM einfügt.
(...)
Das <ng-container>
ist ein Syntaxelement, das vom Angular-Parser erkannt wird. Es ist keine Direktive, Komponente, Klasse oder Schnittstelle. Es ist eher wie die geschweiften Klammern in einem JavaScript-if-Block:
if (someCondition) {
statement1;
statement2;
statement3;
}
Ohne diese geschweiften Klammern würde JavaScript die erste Anweisung nur ausführen, wenn Sie beabsichtigen, alle als einen einzelnen Block bedingt auszuführen. Das <ng-container>
erfüllt einen ähnlichen Bedarf in Angular-Vorlagen.
Ursprüngliche Antwort:
Nach dieser Pull-Anfrage :
<ng-container>
ist ein logischer Container, der zum Gruppieren von Knoten verwendet werden kann, jedoch nicht im DOM-Baum als Knoten gerendert wird.
<ng-container>
wird als HTML-Kommentar gerendert.
also diese eckige Schablone:
<div>
<ng-container>foo</ng-container>
<div>
wird diese Art von Ausgabe erzeugen:
<div>
<!--template bindings={}-->foo
<div>
Dies ng-container
ist nützlich, wenn Sie eine Gruppe von Elementen *ngIf="foo"
in Ihrer Anwendung bedingt anhängen (dh verwenden ) möchten, diese aber nicht mit einem anderen Element umschließen möchten .
<div>
<ng-container *ngIf="true">
<h2>Title</h2>
<div>Content</div>
</ng-container>
</div>
wird dann produzieren:
<div>
<h2>Title</h2>
<div>Content</div>
</div>
<template>
wenn es ohne Anweisungen verwendet wird.<template>
würde nur<!--template bindings={}-->
in diesem Fall produzieren.<template></template>
wird<script></script>
sehen sehen dies<script>
während der Kompilierung vorhanden ist , wird es anschließend entfernt, es gibt keine zusätzlichen Tags im DOM. Ich glaube, dass das Handbuch veraltete Informationen enthält oder einfach falsch ist. Wie auch immer, danke, dass Sie auf den Hauptunterschied zwischen <ng-container> und <template> hingewiesen haben.<script></script>
. Es hat so etwas<!--template bindings={}-->
schon eine ganze Weile gerendert . Die Dokumente werden bald repariert.Die Dokumentation ( https://angular.io/guide/template-syntax#!#star-template ) enthält das folgende Beispiel. Angenommen, wir haben folgenden Vorlagencode:
Bevor es gerendert wird, wird es "entzuckert". Das heißt, die Asterix-Notation wird in die Notation transkribiert:
Wenn 'currentHero' wahr ist, wird dies als gerendert
Was aber, wenn Sie eine bedingte Ausgabe wie diese wünschen:
.. und Sie möchten nicht, dass die Ausgabe in einen Container eingeschlossen wird.
Sie könnten die entzuckerte Version direkt so schreiben:
Und das wird gut funktionieren. Jetzt muss ngIf jedoch Klammern [] anstelle eines Sterns * haben, was verwirrend ist ( https://github.com/angular/angular.io/issues/2303 ).
Aus diesem Grund wurde eine andere Notation erstellt, wie folgt:
Beide Versionen führen zu denselben Ergebnissen (nur die Tags h1 und p werden gerendert). Der zweite wird bevorzugt, da Sie * ngIf wie immer verwenden können.
quelle
ng-container
Idee der Richtlinie kam , danke :)Imo-Anwendungsfälle für
ng-container
sind einfache Ersetzungen, für die eine benutzerdefinierte Vorlage / Komponente übertrieben wäre. Im API-Dokument wird Folgendes erwähntund ich denke, darum geht es: Sachen gruppieren.
Beachten Sie, dass die
ng-container
Direktive anstelle einer Vorlage wegfällt, in der die Direktive den eigentlichen Inhalt umschließt.quelle
Ein Anwendungsfall dafür, wenn Sie eine Tabelle mit * ngIf und * ngFor verwenden möchten - Wenn Sie ein div in td / th setzen, verhält sich das Tabellenelement schlecht -. Ich stand vor diesem Problem und das war die Antwort.
quelle
<template [ngIf]...>
. Die Frage war der Unterschied zwischen diesen beiden Ansätzen.