Какие особенности использования пользовательских директив в вашем опыте?

Пользовательские директивы позволяют абстрагировать повторяющуюся логику и манипуляции с DOM.

Особенности использования:

• Повторное использование: Создание переиспользуемых компонентов поведения.
• Манипуляция с DOM: Прямой доступ к элементу и его содержимому.
• Взаимодействие с данными: Использование входных свойств (inputs) для передачи данных в директиву и выходных свойств (outputs) для вызова событий.
• Работа с жизненным циклом: Использование хуков жизненного цикла (например, ngOnInit, ngOnDestroy) для управления поведением.
• Структурные директивы: Изменение структуры DOM (например, ngIf, ngFor).

Пример структурной директивы, показывающей содержимое в зависимости от условия:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appShowIf]'})
export class ShowIfDirective {

  constructor(
    private templateRef: TemplateRef<any>, // Ссылка на элемент, к которому применяется директива
    private viewContainer: ViewContainerRef // Контейнер для встраивания шаблонов
  ) { }

  @Input() set appShowIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef); // Показываем элемент
    } else {
      this.viewContainer.clear(); // Скрываем элемент
    }
  }
}

Атрибутивные директивы для изменения внешнего вида или поведения элемента.

Пример атрибутивной директивы, меняющей цвет фона при наведении:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Input('appHighlight') highlightColor: string; // Входное свойство

  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'yellow'); // Применяем цвет при наведении
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null); // Сбрасываем цвет при уходе курсора
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Сравнение пользовательских директив с компонентами:

Использую директивы для добавления поведения к существующим элементам, валидации форм, работы с анимацией или специфической обработки событий. Компоненты применяю для создания самостоятельных, переиспользуемых блоков пользовательского интерфейса.