Где я могу найти полный список структурных директив Angular? - PullRequest
0 голосов
/ 05 августа 2020

Где я могу найти полный список структурных директив Angular? Я знаю об этих:

*ngFor
*ngIf
*ngSwitchCase
*ngSwitchDefault
*ngSwitch
*ngTemplateOutput

Есть другие? Я полагаю, что где-то должен быть полный список, но пока мне не удалось его найти.

1 Ответ

0 голосов
/ 05 августа 2020

Директива - это директива. Вот некоторая информация о них.

Структурные директивы

Структурные директивы отвечают за 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
...