Antworten:
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. div
oder span
).
template
erfordert 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-container
stattdessen 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 *ngIf
oder benötigen *ngFor
oder 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
, ngTemplateOutlet
oder createEmbeddedView()
.ng-template
wird für die Strukturrichtlinie verwendet wie ng-if
, ng-for
und ng-switch
. Wenn Sie es ohne die strukturelle Direktive verwenden, passiert nichts und es wird gerendert.
ng-container
wird verwendet, wenn Sie keinen geeigneten Wrapper oder übergeordneten Container haben. In den meisten Fällen verwenden wir div
oder span
als 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-container
kann 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
bezeichnet, 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-template
ist, 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-container
ist wie eine höhere Komponente von React , die nur beim Rendern seiner untergeordneten Elemente hilft.
ng-template
ist im Grunde genommen für die interne Implementierung von Angular gedacht , bei der alles innerhalb des ng-template
Angulars 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
, ngSwitch
usw.
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.
@Input()
s.*
ist natürlich bequemer. Aber Sie haben Recht,<ng-container>
wurde eingeführt, weil die Syntaxunterschiede einige Verwirrung stiften.