<ng-container> vs <template>


150

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?

Jawaban:


244

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>

Itu poin yang bagus. Saya kira itu berbeda dari <template>ketika digunakan tanpa arahan. <template>hanya akan menghasilkan <!--template bindings={}-->dalam hal ini.
Estus Flask

sebenarnya, <template></template>akan menghasilkan <script></script> lihat ini
n00dl3

Tidak demikian halnya dalam kasus saya. Bahkan jika ada <script>selama kompilasi, itu dihapus setelah itu, tidak ada tag tambahan di DOM. Saya percaya bahwa manual berisi informasi yang sudah usang atau hanya salah tentang itu. Bagaimanapun, terima kasih telah menunjukkan perbedaan utama antara <ng-container> dan <template>.
Estus Flask

Sebelum dirilis, Angular dirender <script></script>. Sudah merender sesuatu seperti <!--template bindings={}-->untuk sementara waktu. Dokumen akan segera diperbaiki.
Bangsal

40

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.


Penjelasan yang bagus, ini memberikan ikhtisar tentang Bagaimana ng-containeride pengarahan datang , terima kasih :)
Pankaj Parkar

0

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.


Apakah Anda memiliki tautan ke penyebutan ini? Hanya melihatnya digunakan dalam dokumentasi yang ditautkan di atas dan dokumentasi kasus jamak saat ini: angular.io/docs/ts/latest/api/common/index/… .
Koslun


1
Terima kasih, membuat masalah di situs dokumen tentang kurangnya dokumentasi dan merujuk jawaban ini: github.com/angular/angular.io/issues/2553
Koslun

1
downvoted -1. ng-container bukan tentang menghindari template khusus, ini adalah tentang kemampuan untuk memiliki konten bersyarat yang tidak dibungkus dalam sebuah wadah. Bahkan templat khusus juga akan memperkenalkan wadah pembungkus, yaitu tag arahan itu sendiri.
Carlo Roosen

1
Anda memang benar. Yang pasti adalah perbedaan yang perlu disebutkan. Saya telah menambahkan petunjuk ke posting saya.
Matt

-1

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.


1
Tetapi hal yang sama dapat dicapai dengan <template [ngIf]...>. Pertanyaannya adalah perbedaan antara kedua pendekatan ini.
Estus Flask

oh,
salahku
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.