Что такое директивы и какие их виды существуют в Angular?
Что такое директивы в Angular?
Директивы — это специальные классы в Angular, которые расширяют поведение HTML-элементов. Они позволяют изменять структуру DOM, добавлять стили или динамически управлять логикой компонента.
Виды директив в Angular
Angular делит директивы на три основные категории:
| Тип | Назначение | Примеры |
|---|---|---|
| Атрибутные | Изменяют внешний вид или поведение элемента | ngClass, ngStyle, customHighlight |
| Структурные | Изменяют структуру DOM (добавляют/удаляют элементы) | ngIf, ngFor, ngSwitch |
| Пользовательские | Директивы, созданные вами для добавления повторной логики | appTooltip, appValidate |
Атрибутные директивы
Применяются к элементу как атрибуты. Они могут изменять:
- стиль элемента (
ngStyle) - класс (
ngClass) - поведение через слушатели событий
Пример: ngClass
<div [ngClass]="{ active: isActive }">Текст</div>
Пример пользовательской атрибутной директивы
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
<p appHighlight>Подсвеченный текст</p>
Структурные директивы
Изменяют структуру DOM: добавляют/удаляют элементы.
Примеры
<div *ngIf="isVisible">Показать</div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
*ngIf— условный рендеринг.*ngFor— перебор массива.*ngSwitch— множественное ветвление.
Создание собственной директивы
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appZoom]'
})
export class ZoomDirective {
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onEnter() {
this.el.nativeElement.style.transform = 'scale(1.1)';
}
@HostListener('mouseleave') onLeave() {
this.el.nativeElement.style.transform = 'scale(1)';
}
}
<img src="..." appZoom />
Отличие от компонентов
| Характеристика | Директива | Компонент |
|---|---|---|
| Селектор | [appDirective] (атрибут) | <app-component> (тег) |
| Шаблон | Нет | Есть |
| Использование | Как поведение или стиль | Как UI-элемент |
Совет:
Используйте директивы для повторного поведения, не требующего шаблона. Если нужен UI — лучше создать компонент.