<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> можно использовать в пользовательской директиве?

Ответы

Ответ 1

Изменение: теперь это задокументировано

<ng-container> на помощь

Angular <ng-container> - это группирующий элемент, который не мешает стилям или макету, поскольку Angular не помещает его в DOM.

(...)

<ng-container> - это синтаксический элемент, распознаваемый анализатором Angular. Это не директива, компонент, класс или интерфейс. Это больше похоже на фигурные скобки в JavaScript-блоке if:
  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }
Без этих скобок JavaScript будет выполнять первый оператор только тогда, когда вы намереваетесь выполнить их все условно как один блок. <ng-container> удовлетворяет аналогичную потребность в шаблонах Angular.

Оригинальный ответ:

Согласно этому запросу:

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

Ответ 2

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

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

Прежде чем он будет вынесен, он будет "de-sugared". То есть, нотация астерикса будет транскрибироваться в обозначениях:

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

Если "currentHero" прав, это будет отображаться как

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

Но что, если вы хотите получить условный вывод следующим образом:

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

.. и вы не хотите, чтобы вывод был заключен в контейнер.

Вы можете написать версию de-sugared прямо так:

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

И все будет хорошо. Однако теперь нам нужно ngIf иметь скобки [] вместо asterix *, и это путает (https://github.com/angular/angular.io/issues/2303)

По этой причине была создана другая нотация:

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

Обе версии будут давать одинаковые результаты (будут отображаться только теги h1 и p). Второй предпочтительнее, потому что вы можете использовать * ngIf, как всегда.

Ответ 3

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

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

и я думаю, что это все: группировка.

Имейте в виду, что директива ng-container отпадает вместо шаблона, где его директива обертывает фактическое содержимое.

Ответ 4

Используется для использования, когда вы хотите использовать таблицу с * ngIf и * ngFor. Положив div в td/th, сделайте элемент таблицы misbehave -. Я столкнулся с этой проблемой, и который был, был ответом.