Структурная Директива и Иерархия DOM

Структурная директива в JavaScript и Angular в частности, это инструмент для манипулирования иерархией DOM (Document Object Model), который представляет дерево элементов на веб-странице. Ответ на вопрос "Какая директива изменяет иерархию DOM?" является "Структурная директива".

Структурные директивы в Ангуляре начинаются с символа *. Некоторые из общих примеров таких директив это *ngFor и *ngIf. Они изменяют идеальный макет HTML, добавляя или удаляя элементы в DOM.

Так, например, директива *ngFor позволяет повторять DOM-элементы, базируя на пунктах в массиве:

<li *ngFor="let item of items">{{item.name}}</li>

В приведенном выше примере, *ngFor директива создает новый <li> элемент для каждого элемента в массиве items.

Другой часто используемой директивой является *ngIf, которая добавляет или удаляет элементы из DOM, в зависимости от значения логического выражения.

<div *ngIf="isLoading">Загрузка...</div>

В этом примере, если значение isLoading равно true, <div> элемент будет присутствовать в DOM. Если isLoading равно false, элемент будет удален.

Заключение: структурные директивы являются мощным инструментом для изменения структуры DOM в ваших приложениях Angular. Они предоставляют динамическую поддержку для множества сценариев и являются ключевой частью в создании веб-страниц.