<ng-container> vs <шаблон>

ng-container згадується в документації Angular 2, але немає пояснень як це працює та які випадки використання.

Це, в зокрема , згадується в ngPluralі ngSwitchдирективи.

Чи <ng-container>те ж саме <template>, що чи, чи залежить, чи була написана директива щодо використання одного з них?

Є

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

і

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

повинно бути те саме?

Як ми обираємо одну з них?

Як можна <ng-container>використовувати власну директиву?

Правка: Тепер це документально підтверджено

<ng-container> на допомогу

Angular  <ng-container> - це групуючий елемент, який не заважає стилям чи компонуванню, оскільки Angular не розміщує його у DOM.

(...)

Елемент  <ng-container> синтаксису, розпізнаваний кутовим аналізатором. Це не директива, компонент, клас чи інтерфейс. Це більше схоже на фігурні дужки в if-блоку JavaScript:

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

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

Оригінальна відповідь:

Відповідно до цього запиту на витяг :

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

<ng-container> надається як коментар HTML.

так що цей кутовий шаблон:

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

буде виробляти такий вид продукції:

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

Тому ng-containerкорисно, коли ви хочете умовно додати групу елементів (тобто використовувати *ngIf="foo") у вашій програмі, але не хочете обернути їх іншим елементом .

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

Потім вироблять:

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

Документація ( https://angular.io/guide/template-syntax#!#star-template ) дає такий приклад. Скажімо, у нас є такий шаблон шаблону:

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

Перш ніж його винесуть, він буде "знешкоджений". Тобто позначення астериксу буде переписано на позначення:

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

Якщо "currentHero" є правдою, це буде відображено як

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

Але що робити, якщо ви хочете такого умовного виводу:

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

.. і ви не хочете, щоб результат був загорнутий у контейнер.

Ви можете написати розроблену версію прямо так:

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

І це буде добре працювати. Однак зараз нам потрібно ngIf мати дужки [] замість зірочки *, і це заплутано ( https://github.com/angular/angular.io/isissue/2303 )

З цієї причини було створено інше позначення, як-от так:

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

Обидві версії дадуть однакові результати (відображатимуться лише теги h1 і p). Другий є кращим, оскільки ви можете використовувати * ngIf, як завжди.

Imo випадки використання ng-containerє простими замінами, для яких нестандартний шаблон / компонент буде зайвим. В документі API вони згадують наступне

використовувати ng-контейнер для групування кількох кореневих вузлів

і я гадаю, що це все: групування речей.

Майте на увазі, що ng-containerдиректива відпадає замість шаблону, де її директива обгортає фактичний вміст.

Випадок використання для нього, коли ви хочете використовувати таблицю з * ngIf та * ngFor - Оскільки введення div у td / th зробить елемент таблиці неправильним -. Я зіткнувся з цією проблемою, і це була відповідь.