Ответ
Директивы в Angular — это специальные классы, которые добавляют дополнительное поведение к элементам DOM. Они позволяют манипулировать структурой, стилями или поведением элементов.
Типы директив:
- Компоненты — директивы с шаблоном (наиболее распространённые).
- Структурные — изменяют структуру DOM (например,
*ngIf,*ngFor). - Атрибутные — изменяют внешний вид или поведение элемента (например,
ngStyle,ngClass).
Пример атрибутной директивы:
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}Использование:
<p appHighlight>Выделенный текст</p>Ответ 18+ 🔞
Давай разберемся с этими вашими директивами в Angular, а то народ путается, как хуй с пальмой. Это ж не какая-то ебеня космическая, а вполне себе рабочий инструмент.
Представь, что у тебя есть обычный HTML-элемент, как этот вот <p>. Скучный, серый, нихуя не умеет. А ты хочешь, чтобы он, например, мигал, как ёлка новогодняя, или чтобы по нему кликнули — и он тебе песню спел. Вот для этого и нужны директивы. Это такие надстройки, которые цепляются к элементу и говорят: «Слушай сюда, дружок-пирожок, теперь ты будешь делать вот так и вот эдак».
Какие они бывают, эти директивы? Да их, блядь, три основных вида, как три богатыря, только не все такие заметные.
-
Компоненты. Это самые главные, самые распиздяйские директивы. Они не просто что-то меняют, они целые куски интерфейса с собой таскают — свой шаблон, свою логику. Фактически, 90% того, что ты пишешь в Angular — это компоненты. Их даже отдельно выделяют, но по сути они подвид директив.
-
Структурные директивы. Вот эти ребята — настоящие архитекторы, ёпта. Они всю структуру DOM могут перелопатить. Видел
*ngIf? Это они. «Если условие true — оставляем элемент, если false — нахуй выбрасываем из DOM, будто его и не было».*ngFor— это тоже они: «Возьми массив и наштампуй из каждого элемента по тегу, вот тебе шаблон». Звёздочка (*) перед именем — это их опознавательный знак, как клеймо на жопе. -
Атрибутные директивы. А эти — как стилисты или тренеры по поведению. Сам элемент не трогают, не добавляют и не убирают, но могут его покрасить, заставить реагировать на мышь или ещё какую хуйню делать. Классические примеры —
ngStyleиngClass. Они меняют стили или классы элемента на ходу.
Давай на живом примере, а то нихуя не понятно.
Вот смотри, хочешь ты сделать свою атрибутную директиву, которая будет заливать фон элемента жёлтым, как предупреждение «осторожно, мудак!».
Создаёшь ты файл, например, highlight.directive.ts, и пишешь там вот такой код:
@Directive({
selector: '[appHighlight]' // Селектор — это как кличка директивы. Будешь её так в HTML вызывать.
})
export class HighlightDirective {
constructor(private el: ElementRef) { // ElementRef — это ссылка на сам элемент, к которому прицепились.
// И вот тут, в конструкторе, делаем с ним что хотим.
this.el.nativeElement.style.backgroundColor = 'yellow';
}
}А потом в шаблоне какого-нибудь компонента используешь её, будто обычный атрибут:
<p appHighlight>Этот текст будет на жёлтом фоне, блядь!</p>Вот и вся магия. Навесил атрибут — и элемент сразу стал другим. Никаких лишних телодвижений. Главное — не забыть директиву в модуль добавить, а то Angular её не увидит и будет материться в консоли.
Короче, директивы — это как суперспособности для твоих HTML-тегов. Хочешь — структуру меняй, хочешь — поведение. Без них в Angular — как без рук, одни компоненты, скукота пиздец.