<ng-container> vs <template>

ng-container wird in der Angular 2-Dokumentation erwähnt, es gibt jedoch keine Erklärung, wie es funktioniert und welche Anwendungsfälle es gibt.

Es wird insbesondere in ngPluralund ngSwitchRichtlinien erwähnt.

Tut <ng-container>das Gleiche wie <template>oder hängt es davon ab, ob eine Richtlinie geschrieben wurde, um eine davon zu verwenden?

Sind

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

und

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

soll das gleiche sein?

Wie wählen wir einen von ihnen aus?

Wie kann <ng-container>in einer benutzerdefinierten Direktive verwendet werden?

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-containerist 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>

Die Dokumentation ( https://angular.io/guide/template-syntax#!#star-template ) enthält das folgende Beispiel. Angenommen, wir haben folgenden Vorlagencode:

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

Bevor es gerendert wird, wird es "entzuckert". Das heißt, die Asterix-Notation wird in die Notation transkribiert:

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

Wenn 'currentHero' wahr ist, wird dies als gerendert

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

Was aber, wenn Sie eine bedingte Ausgabe wie diese wünschen:

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

.. und Sie möchten nicht, dass die Ausgabe in einen Container eingeschlossen wird.

Sie könnten die entzuckerte Version direkt so schreiben:

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

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:

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

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.

Imo-Anwendungsfälle für ng-containersind einfache Ersetzungen, für die eine benutzerdefinierte Vorlage / Komponente übertrieben wäre. Im API-Dokument wird Folgendes erwähnt

Verwenden Sie einen ng-Container, um mehrere Stammknoten zu gruppieren

und ich denke, darum geht es: Sachen gruppieren.

Beachten Sie, dass die ng-containerDirektive anstelle einer Vorlage wegfällt, in der die Direktive den eigentlichen Inhalt umschließt.

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.