Ng2 - Разница между тегами ng-container и ng-template

Ответ 1

Оба они в данный момент (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, поскольку он соответствует синтаксису nice *, который вы ожидаете и, вероятно, уже знакомы.

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

Вы можете найти более подробную информацию, прочитав эту дискуссию о GitHub.

Обратите внимание, что в 4.x <template> устарела и изменяется на <ng-template>.

Использование

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

Ответ 2

ng-template используется для структурной директивы, такой как ng-if, ng-for и ng-switch. Если вы используете его без структурной директивы, ничего не произойдет, и он будет отображаться.

ng-container используется, когда у вас нет подходящей оболочки или родительского контейнера. В большинстве случаев мы используем div или span в качестве контейнера, но в тех случаях, когда мы хотим использовать несколько структурных директив. Но мы не можем использовать более одной структурной директивы для элемента, в этом случае ng-container может использоваться как контейнер

Ответ 3

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

Другой вариант использования ng-template - это то, что мы можем использовать его для вложения нескольких структурных директив вместе. Вы можете найти отличные примеры в этом посте: angular ng-template/ng-container

Ответ 4

Проще говоря, ng-container похож на более высокий компонент React, который помогает только в рендеринге его дочерних элементов.

ng-template в основном предназначен для внутренней реализации Angular, в которой все, что находится внутри ng-template, полностью игнорируется при рендеринге и в основном становится комментарием к исходному виду. Предполагается, что это будет использоваться с внутренними директивами ngIf, ngSwitch как ngIf, ngSwitch и т.д.