wake-up-neo.com

<ng-container> vs <template>

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

Es wird insbesondere in den Anweisungen ngPlural und ngSwitch erwähnt.

Macht <ng-container> dasselbe wie <template> oder hängt es davon ab, ob eine Anweisung geschrieben wurde, um eine von ihnen 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 benutzerdefinierten Anweisungen verwendet werden?

angulartypescriptangular2-template
118
estus

Edit: Jetzt ist es dokumentiert

<ng-container> zur Rettung

Der Angular <ng-container> ist ein Gruppierungselement, das die Formatvorlagen oder das Layout nicht beeinträchtigt, da es von Angular nicht in das DOM eingefügt wird.

(...)

<ng-container> ist ein vom Angular-Parser erkanntes Syntaxelement. 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 führt JavaScript die erste Anweisung nur dann aus, wenn Sie alle als bedingte Anweisungen als einen einzelnen Block ausführen möchten. Der <ng-container> erfüllt eine ähnliche Anforderung in Angular-Vorlagen.

Ursprüngliche Antwort:

Gemäß dieser Pull-Anfrage :

<ng-container> ist ein logischer Container, der zum Gruppieren von Knoten verwendet werden kann, aber nicht in der DOM-Struktur als Knoten dargestellt wird.

<ng-container> wird als HTML-Kommentar dargestellt.

also diese eckige Vorlage:

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

erzeugt diese Art von Ausgabe: 

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

ng-container ist also nützlich, wenn Sie eine Gruppe von Elementen in Ihrer Anwendung anhängen möchten (dh *ngIf="foo"), aber sie 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>
201
n00dl3

Die Dokumentation ( https://angular.io/guide/template-syntax#!#star-template ) enthält das folgende Beispiel. Sagen wir, wir haben Template-Code wie folgt:

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

Bevor es gerendert wird, wird es "entzuckert". Das heißt, die Stern-Notation wird in die Notation übertragen:

<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 einem Container verpackt wird.

Sie können die de-sugared-Version direkt so schreiben:

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

Und das wird gut funktionieren. Nun brauchen wir aber ngIf, um Klammern [] anstelle eines Sterns * zu haben, und das ist verwirrend ( https://github.com/angular/angular.io/issues/2303 )

Aus diesem Grund wurde eine andere Notation erstellt:

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

Beide Versionen liefern die gleichen Ergebnisse (nur das h1- und das p-Tag werden gerendert). Der zweite wird bevorzugt, da Sie wie immer * ngIf verwenden können. 

34
Carlo Roosen

Imo-Anwendungsfälle für ng-container sind einfache Ersetzungen, für die eine benutzerdefinierte Vorlage/Komponente zu viel 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: Gruppieren von Sachen.

Beachten Sie, dass die ng-container-Direktive nicht einer Vorlage entspricht, bei der die Direktive den tatsächlichen Inhalt umgibt.

0
Matt