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


96

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.

Jawaban:


105

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().

8
"Sintaks yang buruk" mungkin sedikit berlebihan: D Ini adalah sintaks yang normal untuk meneruskan nilai ke @Input()s. *tentu saja lebih nyaman. Tetapi Anda benar, <ng-container>diperkenalkan karena perbedaan sintaks menyebabkan kebingungan.
Günter Zöchbauer

1
<ng-container> tidak memperkenalkan elemen baru di DOM. Bagaimana dengan <ng-template>? Mohon klarifikasi dalam jawaban Anda.
Jyoti Prasad Pal

1
Halaman ini membantu saya mencari tahu apa itu: blog.angular-university.io/… .
Mikser

Bagaimana saya bisa menggunakan n-container dengan ngFor untuk merender baris tabel? saya mencoba ini tetapi tidak berhasil. Saya ingin membuat baris secara bersyarat sehingga saya dapat memiliki ngFor pada elemen baris.
Ahsan

19

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


7

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


4

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.


1

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


1

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.


0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.