ng2 - Ng-konteyner ve ng-şablon etiketleri arasındaki fark

Lütfen birisi kullanmak <ng-container>ve <ng-template>öğeler arasındaki farkı gösterebilir mi?

NgContainerŞablon etiketi için belge bulamadım ve arasındaki farkı tam olarak anlayamadım.

Her birinin bir kod örneği çok yardımcı olacaktır.

Her ikisi de şu anda (2.x, 4.x) sayfada görüntülenecek başka bir öğeyi ( divveya gibi span) tanıtmak zorunda kalmadan öğeleri gruplamak için kullanılır .

templateancak, kötü sözdizimi gerektirir. Örneğin,

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

olacaktı

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

Bunun ng-containeryerine, *beklediğiniz ve muhtemelen zaten aşina olduğunuz güzel sözdizimini izlediği için kullanabilirsiniz .

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

GitHub'daki bu tartışmayı okuyarak daha fazla ayrıntı bulabilirsiniz .

4.x sürümünün <template>kullanımdan kaldırıldığını ve olarak değiştirildiğini unutmayın <ng-template>.

Kullanım

• <ng-container>*ngIfveya gibi iç içe geçmiş yapısal yönergeler için bir yardımcı elemana ihtiyacınız varsa *ngForveya böyle bir yapısal yönergenin içine birden fazla elemanı sarmak istiyorsanız;
• <ng-template>Eğer bir görünüm gerekirse kullanarak çeşitli yerlerde damga istiyorum "pasajı" ngForTemplate, ngTemplateOutletya da createEmbeddedView().

ng-templateng-if, ng-forve gibi yapısal yönergeler için kullanılır ng-switch. Yapısal yönerge olmadan kullanırsanız, hiçbir şey olmaz ve işlenir.

ng-containeruygun bir paketleyiciniz veya ana kabınız olmadığında kullanılır. Çoğu durumda, kapsayıcı olarak divveya kullanıyoruz, spanancak bu gibi durumlarda birden çok yapısal yönergeyi kullanmak istediğimizde. Ancak bir eleman üzerinde birden fazla yapısal direktif kullanamayız, bu durumda ng-containerkonteyner olarak kullanılabilir

ng-şablon oluşturma HTML için Açısal unsurdur. Hiçbir zaman doğrudan gösterilmez. NgIf, ngFor, ngSwitch, .. gibi yapısal yönergeler için kullanın. Örnek :
<ng-template>

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

Angular, * ngIf özniteliğini bunun <ng-template>gibi barındırıcı öğenin etrafına sarılmış bir öğeye çevirir .

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

ng-konteyner
Uygun bir barındırma öğesi olmadığında bir gruplama öğesi olarak kullanın.
Misal:

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

Bu işe yaramayacak. Çünkü bazı HTML öğeleri, tüm alt öğelerin belirli bir türde olmasını gerektirir. Örneğin, <select>öğe çocuk gerektirir. Seçenekleri bir koşullu veya bir <span>.

Bunu dene :

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

Bu çalışacak.

Daha fazla bilgi: Açısal Yapısal Yönerge

ng-şablonu gerçek değeri gösterir.

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

Çıktı:

Koşulsuz ng-konteyner gösterisi de içeriği gösterir.

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

Çıktı:
Bu konteynerdir.

ng-templateAdından da anlaşılacağı gibi, bir şablonu belirtir . Kendi başına hiçbir şey oluşturmaz. ng-containerBir şablonu dinamik olarak oluşturmak için bir yer tutucu sağlamak için a kullanabiliriz .

Başka bir kullanım durumu ng-template, onu birden çok yapısal yönergeyi bir araya getirmek için kullanabilmemizdir. Bu blog gönderisinde harika örnekler bulabilirsiniz: açısal ng-şablonu / ng-konteyner

Basit bir ifadeyle, yalnızca alt öğelerinin oluşturulmasına yardımcı olan React'inng-container bir Yüksek bileşeni gibidir .

ng-templatetemelde Angular'ın dahili uygulaması içindir , burada ng-templateoluşturma sırasında içindeki her şey tamamen yok sayılır ve temelde görünüm kaynağına ilişkin bir yorum haline gelir. Bunun, Angular'ın ngIf, ngSwitchvb. Gibi dahili yönergeleriyle kullanılması gerekiyordu .

Ben gibi <ng-container>Açısal .component.html dosyalarında mümkün olduğunca "biçimlendirme" dan "mantığı" ayırmak için bir yol olarak.

(kısmi) bir html tablosunun satırlarını oluşturmak için örnek:

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

Bu şekilde, bir HTML'den <table>başka bir şeye, örneğin <div>flexbox stiliyle değiştirmek istersem, döngü mantığını <tr>. Ayrıca döngü (ngFor) mantığının normal html tarafından kısmen engellenmesini de engeller.