ng2 - різниця між тегами ng-container та ng-template

Хтось може проілюструвати різницю між використанням <ng-container>та <ng-template>елементами?

Я не зміг знайти документацію для NgContainerта не зовсім розумію різницю між тегом шаблону.

Приклад коду кожного дуже допоможе.

Обидва вони в даний момент (2.x, 4.x) використовуються для групування елементів без необхідності вводити інший елемент, який буде відображатися на сторінці (наприклад, divабо span).

templateоднак вимагає неприємного синтаксису. Наприклад,

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

стане

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

Ви можете використовувати ng-containerзамість цього, оскільки він відповідає приємному *синтаксису, який ви очікуєте і, мабуть, вже знайомий.

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

Більше деталей ви можете знайти, прочитавши цю дискусію на GitHub .

Зверніть увагу, що у <template>версії 4.x застаріло та її змінено на <ng-template>.

Використовуйте

• <ng-container>якщо вам потрібен допоміжний елемент для вкладених структурних директив, таких як *ngIfабо, *ngForабо якщо ви хочете обернути більше ніж один елемент всередині такої структурної директиви;
• <ng-template>якщо вам потрібен вид «фрагмент» , який ви хочете віддрукувати в різних місцях з використанням ngForTemplate, ngTemplateOutletабо createEmbeddedView().

ng-templateвикористовується для структурної директиви типу ng-if, ng-forта ng-switch. Якщо ви використовуєте його без структурної директиви, нічого не відбувається, і він відобразиться.

ng-containerвикористовується, коли у вас немає відповідної обгортки або батьківського контейнера. У більшості випадків ми використовуємо divабо spanяк контейнер, але в таких випадках, коли ми хочемо використовувати кілька структурних директив. Але ми не можемо використовувати більше одного структурного розпорядження для елемента, і в цьому випадку ми ng-containerможемо використовувати його як контейнер

ng-template
The <ng-template>- елемент Angular для візуалізації HTML. Він ніколи не відображається безпосередньо. Використовувати для структурних директив, таких як: ngIf, ngFor, ngSwitch, ..
Приклад :

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

Angular переводить атрибут * ngIf в <ng-template>елемент, обгорнутий навколо елемента хоста, таким чином.

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

ng-container
Використовувати як елемент групування, коли немає відповідного елемента хоста.
Приклад:

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

Це не спрацює. Оскільки деякі елементи HTML вимагають, щоб усі безпосередні діти були певного типу. Наприклад, для <select>стихії потрібні діти. Ви не можете обернути параметри умовною чи a <span>.

Спробуйте це :

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

Це спрацює.

Більше інформації: Директива про кутові конструкції

ng-шаблон показує справжнє значення.

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

Вихід:

шоу ng-container без умови також показує вміст.

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

Результат:
Це контейнер.

ng-templateяк випливає з назви, позначає шаблон . Сам по собі він нічого не робить. Ми можемо використовувати a ng-containerдля надання заповнювача для динамічного відображення шаблону .

Ще одним варіантом використання ng-templateє те, що ми можемо використовувати його для вкладання кількох структурних директив разом. Ви можете знайти чудові приклади у цьому дописі в блозі: angular ng-template / ng-container

Простіше кажучи, ng-containerце як вищий компонент React , який лише допомагає у візуалізації його дочірніх елементів.

ng-templateв основному для внутрішньої реалізації Angular , де все, що знаходиться всередині ng-template, повністю ігнорується під час рендерингу, і це в основному стає коментарем до джерела перегляду. Це , як передбачається , буде використовуватися з внутрішніми директивами кутових як ngIf, і ngSwitchт.д.

Мені подобається <ng-container>як спосіб максимально відокремити "логіку" від "розмітки" у файлах Angular .component.html.

(частковий) приклад відображення рядків таблиці 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>

Таким чином, якщо я хочу перейти з HTML <table>на щось інше, наприклад, купу <div>з стилем flexbox, мені не потрібно "вирізати" циклічну логіку (або ризикувати повністю її втратити) зсередини <tr>. Це також утримує циклічну логіку (ngFor) від часткового затемнення звичайним html.