ng2 - Unterschied zwischen ng-container- und ng-template-Tags

Kann jemand bitte den Unterschied zwischen Verwendung <ng-container>und <ng-template>Elementen veranschaulichen ?

Ich konnte keine Dokumentation für finden NgContainerund verstehe den Unterschied zwischen Vorlagen-Tags nicht ganz.

Ein Codebeispiel von jedem würde sehr helfen.

Beide werden derzeit (2.x, 4.x) verwendet, um Elemente zu gruppieren, ohne dass ein weiteres Element eingefügt werden muss, das auf der Seite gerendert wird (z. B. divoder span).

templateerfordert jedoch eine unangenehme Syntax. Beispielsweise,

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>

würde werden

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

Sie können ng-containerstattdessen verwenden, da es der netten *Syntax folgt, die Sie erwarten und mit der Sie wahrscheinlich bereits vertraut sind.

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <li>...</li>
</ng-container>

Weitere Informationen finden Sie in dieser Diskussion auf GitHub .

Beachten Sie, dass in 4.x <template>veraltet ist und in geändert wird <ng-template>.

Verwenden

• <ng-container>wenn Sie ein Hilfselement für verschachtelte Strukturanweisungen wie *ngIfoder benötigen *ngForoder wenn Sie mehr als ein Element in eine solche Strukturanweisung einschließen möchten;
• <ng-template>wenn Sie eine Ansicht benötigen „Schnipsel“ , dass Sie an verschiedenen Stellen stempeln wollen , mit ngForTemplate, ngTemplateOutletoder createEmbeddedView().

ng-templatewird für die Strukturrichtlinie verwendet wie ng-if, ng-forund ng-switch. Wenn Sie es ohne die strukturelle Direktive verwenden, passiert nichts und es wird gerendert.

ng-containerwird verwendet, wenn Sie keinen geeigneten Wrapper oder übergeordneten Container haben. In den meisten Fällen verwenden wir divoder spanals Container, aber in solchen Fällen, wenn wir mehrere strukturelle Anweisungen verwenden möchten. Wir können jedoch nicht mehr als eine strukturelle Direktive für ein Element verwenden. In diesem Fall ng-containerkann es als Container verwendet werden

ng-template
Das <ng-template>ist ein Angular-Element zum Rendern von HTML. Es wird niemals direkt angezeigt. Verwendung für strukturelle Anweisungen wie: ngIf, ngFor, ngSwitch, ..
Beispiel :

<div *ngIf="hero" class="name">{{hero.name}}</div>

Angular übersetzt das Attribut * ngIf in ein <ng-template>Element, das wie folgt um das Hostelement gewickelt ist.

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ng-container
Wird als Gruppierungselement verwendet, wenn kein geeignetes Hostelement vorhanden ist.
Beispiel:

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

Dies wird nicht funktionieren. Weil einige HTML-Elemente erfordern, dass alle unmittelbaren untergeordneten Elemente von einem bestimmten Typ sind. Für das <select>Element sind beispielsweise untergeordnete Elemente erforderlich. Sie können die Optionen nicht in eine Bedingung oder eine <span>.

Versuche dies :

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

Das wird funktionieren.

Weitere Informationen: Winkelstrukturrichtlinie

ng-template zeigt wahren Wert.

<ng-template>
    This is template block
</ng-template>

Ausgabe:

ng-container show ohne bedingung zeigen auch inhalt.

<ng-container>
    This is container.
</ng-container>

Ausgabe:
Dies ist ein Container.

ng-templatebezeichnet, wie der Name schon sagt, eine Vorlage . An sich rendert es nichts. Wir können a verwenden ng-container, um einen Platzhalter zum dynamischen Rendern einer Vorlage bereitzustellen .

Ein weiterer Anwendungsfall ng-templateist, dass wir damit mehrere strukturelle Anweisungen miteinander verschachteln können. Hier in diesem Blog-Beitrag finden Sie großartige Beispiele: eckige ng-Vorlage / ng-Container

In einfachen Worten, ng-containerist wie eine höhere Komponente von React , die nur beim Rendern seiner untergeordneten Elemente hilft.

ng-templateist im Grunde genommen für die interne Implementierung von Angular gedacht , bei der alles innerhalb des ng-templateAngulars beim Rendern vollständig ignoriert wird und im Grunde genommen ein Kommentar zur Ansichtsquelle wird. Dies soll mit kantiger internen Richtlinien verwendet werden wie ngIf, ngSwitchusw.

Ich mag es <ng-container>, "Logik" so weit wie möglich von "Markup" in den Angular .component.html-Dateien zu trennen.

(Teil-) Beispiel zum Rendern von Zeilen einer HTML-Tabelle:

        <ng-container *ngFor="let product of products">
          <tr>
            <td></td>
            <td>{{ product.productName }}</td>
            <td>{{ product.productCode }}</td>
            <td>{{ product.releaseDate }}</td>
            <td>{{ product.price }}</td>
            <td>{{ product.starRating }}</td>
          </tr>
        </ng-container>

Auf diese Weise muss ich die Schleifenlogik nicht aus dem Inneren heraus "herausarbeiten" (oder riskieren, sie vollständig zu verlieren) , wenn ich von einem HTML- Code <table>zu etwas anderem wechseln möchte , z. B. zu einem Haufen <div>mit Flexbox-Stil <tr>. Es verhindert auch, dass die Schleifenlogik (ngFor) durch das normale HTML teilweise verdeckt wird.