Директива - это директива. Вот некоторая информация о них.
Структурные директивы
Структурные директивы отвечают за HTML макет. Они формируют или изменяют структуру DOM, обычно путем добавления, удаления или изменения элементов.
Как и в случае с другими директивами, вы применяете структурную директиву к элементу хоста. Затем директива делает все, что она должна делать с этим элементом хоста и его потомками.
Структурные директивы легко распознать. Звездочка (*) предшествует имени атрибута директивы, как в этом примере.
Префикс звездочки (*)
Наверняка вы обратили внимание на префикс звездочки (*) в имени директивы и задались вопросом, зачем это нужно и для чего она нужна.
Здесь * ngIf отображает имя героя, если герой существует.
<div *ngIf="hero" class="name">{{hero.name}}</div>
Звездочка означает «синтаксис c сахар» для чего-то более сложного. Внутренне Angular переводит атрибут * ngIf в элемент, обернутый вокруг хост-элемента, вот так.
<ng-template [ngIf]="hero">
<div class="name">{{hero.name}}</div>
</ng-template>
- Директива * ngIf перемещена в элемент, где она стала привязка свойства, [ngIf].
- Остальная часть, включая его атрибут класса, перемещена внутри элемента.
Когда мы добавляем директиву с помощью *, мы сообщаем использовать элемент, к которому он прикреплен, в качестве шаблона.
Встроенные структурные директивы
Структурные директивы отвечает за макет HTML. Они формируют или изменяют структуру DOM, обычно путем добавления, удаления и изменения основных элементов, к которым они прикреплены.
Этот раздел представляет собой введение в общие встроенные структурные директивы:
- NgIf - условно создает или уничтожает подпредставления из шаблона.
- NgFor - повторяет узел для каждого элемента в списке.
- NgSwitch - набор директив, переключающих среди альтернативных представлений.
Весь список структурных директив в Angular Общий пакет:
- NgComponentOutlet
- NgForOf
- NgIf
- NgSwitchCase
- NgSwitchDefault
- NgTemplateOutlet