<ng-container> vs <template>

ng-container disebutkan dalam dokumentasi Angular 2 tetapi tidak ada penjelasan cara kerjanya dan kasus penggunaan apa.

Ini khususnya disebutkan dalam ngPluraldan ngSwitcharahan.

Apakah <ng-container>melakukan hal yang sama dengan <template>, atau tergantung apakah arahan ditulis untuk menggunakan salah satunya?

Adalah

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

dan

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

seharusnya sama?

Bagaimana kita memilih salah satunya?

Bagaimana bisa <ng-container>digunakan dalam arahan khusus?

Sunting: Sekarang sudah didokumentasikan

<ng-container> untuk menyelamatkan

Angular  <ng-container> adalah elemen pengelompokan yang tidak mengganggu gaya atau tata letak karena Angular tidak memasukkannya ke dalam DOM.

(...)

Ini  <ng-container> adalah elemen sintaks yang dikenali oleh pengurai Angular. Ini bukan arahan, komponen, kelas, atau antarmuka. Ini lebih seperti kurung kurawal di blok if JavaScript:

  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }

Tanpa kawat gigi itu, JavaScript hanya akan menjalankan pernyataan pertama saat Anda bermaksud mengeksekusi semuanya secara bersyarat sebagai satu blok. The  <ng-container> memenuhi kebutuhan yang sama di template sudut.

Jawaban asli:

Menurut permintaan tarik ini :

<ng-container> adalah wadah logis yang dapat digunakan untuk mengelompokkan node tetapi tidak diberikan dalam pohon DOM sebagai simpul.

<ng-container> diterjemahkan sebagai komentar HTML.

jadi templat bersudut ini:

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

akan menghasilkan output seperti ini:

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

Jadi ng-containerberguna ketika Anda ingin menambahkan sekelompok elemen (yaitu menggunakan *ngIf="foo") dalam aplikasi Anda tetapi tidak ingin membungkusnya dengan elemen lain .

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

akan menghasilkan:

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

Dokumentasi ( https://angular.io/guide/template-syntax#!#star-template ) memberikan contoh berikut. Katakanlah kita memiliki kode templat seperti ini:

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

Sebelum itu akan diberikan, itu akan "dihapuskan". Artinya, notasi asterix akan ditranskripsi ke notasi:

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

Jika 'currentHero' benar, ini akan diterjemahkan sebagai

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

Tetapi bagaimana jika Anda menginginkan output bersyarat seperti ini:

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

.. dan Anda tidak ingin hasilnya dibungkus dalam wadah.

Anda dapat menulis versi de-sugared secara langsung seperti:

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

Dan ini akan bekerja dengan baik. Namun, sekarang kita perlu ngIf untuk memiliki tanda kurung [] bukan asterix *, dan ini membingungkan ( https://github.com/angular/angular.io/issues/2303 )

Oleh karena itu notasi yang berbeda dibuat, seperti:

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

Kedua versi akan menghasilkan hasil yang sama (hanya tag h1 dan p yang akan diberikan). Yang kedua lebih disukai karena Anda dapat menggunakan * ngIf seperti biasa.

Imo use cases untuk ng-containerpenggantian sederhana yang komponen / template khusus akan berlebihan. Dalam dokumen API mereka menyebutkan yang berikut ini

gunakan wadah-ng untuk mengelompokkan beberapa node root

dan saya kira itulah masalahnya: pengelompokan barang.

Ketahuilah bahwa ng-containerarahan jauh dari pada templat di mana arahannya membungkus konten aktual.

Sebuah use case untuk itu ketika Anda ingin menggunakan tabel dengan * ngIf dan * ngFor - Saat meletakkan div di td / th akan membuat elemen tabel bertingkah salah -. Saya menghadapi masalah ini dan itulah jawabannya.