Загрузка...
Загрузка...
Продолжая работу с платформой, вы принимаете условия Политики конфиденциальности и использование файлов cookie.
Директивы — это специальные классы в Angular, которые расширяют поведение HTML-элементов. Они позволяют изменять структуру DOM, добавлять стили или динамически управлять логикой компонента.
Angular делит директивы на три основные категории:
| Тип | Назначение | Примеры |
|---|---|---|
| Атрибутные | Изменяют внешний вид или поведение элемента | ngClass, ngStyle, customHighlight |
| Структурные | Изменяют структуру DOM (добавляют/удаляют элементы) | ngIf, ngFor, ngSwitch |
| Пользовательские | Директивы, созданные вами для добавления повторной логики | appTooltip, appValidate |
Применяются к элементу как атрибуты. Они могут изменять:
ngStyle)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 — лучше создать компонент.