<ng-container> - <template>

ng-container Angular 2 belgelerinde bahsedilmiştir ancak nasıl çalıştığı ve kullanım durumlarının ne olduğu ile ilgili bir açıklama yoktur.

Özellikle ngPluralve ngSwitchdirektiflerinde bahsedilmektedir .

<ng-container>Aynı şeyi mi yapıyor <template>yoksa bunlardan birini kullanmak için bir direktifin yazılmasına bağlı mı?

Are

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

ve

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

aynı olması mı gerekiyor?

Bunlardan birini nasıl seçeriz?

<ng-container>Özel direktifte nasıl kullanılabilir?

Düzenleme: Şimdi belgelenmiştir

<ng-container> kurtarmak için

Angular  <ng-container> , Angular onu DOM'a koymadığı için stillere veya mizanpaja müdahale etmeyen bir gruplama öğesidir.

(...)

<ng-container> Açısal ayrıştırıcı tarafından tanınan bir söz dizimi elemanıdır. Bu bir yönerge, bileşen, sınıf veya arayüz değildir. Daha çok bir JavaScript if-bloğundaki süslü parantezlere benzer:

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

Bu parantezler olmadan, JavaScript yalnızca hepsini tek bir blok olarak koşullu olarak yürütmek istediğinizde ilk ifadeyi yürütür. <ng-container> Tatmin Açısal şablonlarına benzer bir ihtiyaç.

Orijinal cevap:

Göre bu çekme isteği :

<ng-container> düğümleri gruplamak için kullanılabilen ancak DOM ağacında düğüm olarak işlenmeyen mantıksal bir kapsayıcıdır.

<ng-container> bir HTML yorumu olarak oluşturulur.

bu açısal şablon:

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

bu tür çıktılar üretecek:

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

Bu ng-container, uygulamanızda bir grup öğeyi koşullu olarak eklemek istediğinizde (yani kullanarak *ngIf="foo") ancak bunları başka bir öğeyle sarmalamak istemediğinizde kullanışlıdır .

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

daha sonra üretecek:

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

Belgeler ( https://angular.io/guide/template-syntax#!#star-template ) aşağıdaki örneği verir. Şöyle bir şablon kodumuz olduğunu varsayalım:

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

İşlenmeden önce "şekeri giderilir". Yani, asterix notasyonu gösterime kopyalanacaktır:

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

"CurrentHero" doğruysa, bu şu şekilde yorumlanacaktır:

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

Ama ya böyle bir koşullu çıktı istiyorsanız:

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

.. ve çıktının bir konteynere sarılmasını istemezsiniz.

Şekersiz versiyonu doğrudan şu şekilde yazabilirsiniz:

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

Ve bu iyi çalışacak. Ancak, şimdi yıldız işareti * yerine köşeli parantezlere [] sahip olmak için ngIf'e ihtiyacımız var ve bu kafa karıştırıcı ( https://github.com/angular/angular.io/issues/2303 )

Bu nedenle farklı bir gösterim oluşturuldu, şöyle:

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

Her iki sürüm de aynı sonuçları üretecektir (yalnızca h1 ve p etiketi görüntülenecektir). İkincisi tercih edilir çünkü her zaman olduğu gibi * ngIf kullanabilirsiniz.

Imo kullanım durumları, ng-containerözel bir şablonun / bileşenin gereğinden fazla olacağı basit değiştirmelerdir. API belgesinde aşağıdakilerden bahsediyorlar

Birden fazla kök düğümü gruplamak için bir ng-konteyner kullanın

ve sanırım her şey bununla ilgili: bir şeyleri gruplamak.

Unutmayın ng-containeryönergesi uzakta bunun yerine yönergesi gerçek içeriği sarar bir şablonun düşer.

* NgIf ve * ngFor ile bir tablo kullanmak istediğinizde bunun için bir kullanım durumu - td / th'ye bir div koymak gibi tablo elemanının yanlış davranmasına neden olacaktır -. Ben bu sorunla karşı karşıya ve bu cevap oldu.