ng2 - Perbedaan antara tag ng-container dan ng-template

Bisakah seseorang mengilustrasikan perbedaan antara penggunaan <ng-container>dan <ng-template>elemen?

Saya tidak dapat menemukan dokumentasi untuk NgContainerdan tidak begitu memahami perbedaan antara tag template.

Contoh kode masing-masing akan sangat membantu.

Keduanya saat ini (2.x, 4.x) digunakan untuk mengelompokkan elemen bersama-sama tanpa harus memasukkan elemen lain yang akan ditampilkan di halaman (seperti divatau span).

template, bagaimanapun, membutuhkan sintaks yang buruk. Sebagai contoh,

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

akan menjadi

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

Anda dapat menggunakan ng-containersebagai gantinya karena mengikuti *sintaks bagus yang Anda harapkan dan mungkin sudah Anda kenal.

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

Anda dapat menemukan detail lebih lanjut dengan membaca diskusi ini di GitHub .

Perhatikan bahwa di 4.x <template>tidak digunakan lagi dan diubah menjadi <ng-template>.

Menggunakan

• <ng-container>jika Anda memerlukan elemen pembantu untuk arahan struktural bersarang seperti *ngIfatau *ngForatau jika Anda ingin membungkus lebih dari satu elemen di dalam arahan struktural tersebut;
• <ng-template>jika Anda membutuhkan tampilan "potongan" yang Anda inginkan untuk cap di berbagai tempat menggunakan ngForTemplate, ngTemplateOutletatau createEmbeddedView().

ng-templatedigunakan untuk arahan struktural seperti ng-if, ng-fordan ng-switch. Jika Anda menggunakannya tanpa arahan struktural, tidak ada yang terjadi dan itu akan ditampilkan.

ng-containerdigunakan jika Anda tidak memiliki pembungkus atau wadah induk yang sesuai. Dalam kebanyakan kasus, kami menggunakan divatau spansebagai wadah tetapi dalam kasus seperti itu ketika kami ingin menggunakan beberapa arahan struktural. Tapi kita tidak bisa menggunakan lebih dari satu arahan struktural pada sebuah elemen, dalam hal ini, ng-containerbisa digunakan sebagai wadah

ng-template
Ini <ng-template>adalah elemen Angular untuk rendering HTML. Itu tidak pernah ditampilkan secara langsung. Gunakan untuk arahan struktural seperti: ngIf, ngFor, ngSwitch, ..
Contoh :

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

Angular menerjemahkan atribut * ngIf menjadi sebuah <ng-template>elemen, melingkari elemen host, seperti ini.

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

ng-container
Gunakan sebagai elemen pengelompokan jika tidak ada elemen host yang sesuai.
Contoh:

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

Ini tidak akan berhasil. Karena beberapa elemen HTML membutuhkan semua turunan langsung dari tipe tertentu. Misalnya, <select>elemen membutuhkan anak. Anda tidak bisa membungkus opsi dalam kondisi atau <span>.

Coba ini :

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

Ini akan berhasil.

Informasi selengkapnya: Arahan Struktural Sudut

ng-template menunjukkan nilai sebenarnya.

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

Keluaran:

ng-container show tanpa syarat juga menampilkan isinya.

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

Output:
Ini adalah wadah.

ng-templatesesuai dengan namanya, menunjukkan template . Dengan sendirinya itu tidak membuat apapun. Kita bisa menggunakan a ng-containeruntuk menyediakan placeholder untuk merender template secara dinamis .

Kasus penggunaan lainnya ng-templateadalah bahwa kita dapat menggunakannya untuk menyatukan beberapa arahan struktural bersama-sama. Anda dapat menemukan contoh bagus di sini di entri blog ini: angular ng-template / ng-container

Sederhananya, ng-containeradalah seperti komponen yang Lebih Tinggi dari React , yang hanya membantu dalam rendering elemen anaknya.

ng-templatepada dasarnya untuk implementasi internal Angular , di mana semua yang ada di dalam ng-templatesepenuhnya diabaikan saat rendering dan pada dasarnya menjadi komentar pada sumber tampilan. Ini seharusnya digunakan dengan arahan internal Angular seperti ngIf, ngSwitchdll.

Saya suka <ng-container>sebagai cara untuk memisahkan "logika" dari "markup" sebanyak mungkin dalam file .component.html Angular.

(sebagian) contoh untuk merender baris dari tabel html:

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

Dengan begitu, jika saya ingin mengubah dari HTML <table>ke sesuatu yang lain, seperti sekelompok <div>dengan gaya flexbox, saya tidak perlu "mengukir" logika perulangan (atau risiko kehilangan sepenuhnya) dari dalam <tr>. Ini juga membuat logika perulangan (ngFor) tidak dikaburkan sebagian oleh html normal.