Чем отличается @Component от @Directive?angular-16

Основные отличия

Характеристика @Component @Directive
Назначение Создание компонентов с шаблоном Добавление поведения к элементам
Шаблон Обязателен (template/templateUrl) Отсутствует
Селектор Обычно элемент (тег) Чаще атрибут (но может быть любой)
Инкапсуляция Поддерживает ViewEncapsulation Нет инкапсуляции стилей
Жизненный цикл Полный набор хуков Только основные хуки

Глубокий анализ

1. @Component

Компоненты - это строительные блоки UI в Angular. Они обязательно включают:

  • Шаблон (HTML)
  • Стили (CSS)
  • Логику (TypeScript)

Пример компонента:

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserCardComponent {
  @Input() user: User;
}

Ключевые особенности:

  • Создают собственный scope DOM (Shadow DOM эмуляция)
  • Могут содержать дочерние компоненты
  • Поддерживают Dependency Injection
  • Имеют полный жизненный цикл (ngOnInit, ngOnDestroy и др.)

2. @Directive

Директивы добавляют поведение к существующим элементам. Они не создают собственный шаблон.

Пример директивы:

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  @HostListener('mouseenter') showTooltip() {
    // Логика показа подсказки
  }
}

Типы директив:

  1. Атрибутные (наиболее распространенные) - изменют внешний вид/поведение
  2. Структурные (например, *ngIf) - меняют структуру DOM

Практическое сравнение

Когда использовать компонент:

  1. Нужно создать переиспользуемый UI-блок
  2. Требуется собственный шаблон
  3. Нужна изоляция стилей
  4. Требуется сложная логика с жизненным циклом

Когда использовать директиву:

  1. Нужно добавить поведение к существующему элементу
  2. Требуется модифицировать несколько элементов на странице
  3. Нужно создать кастомный валидатор для форм
  4. Требуется структурное изменение DOM (*ngFor/*ngIf)

Пример совместного использования

@Component({
  selector: 'app-product-list',
  template: `
    <div *appHighlight="'yellow'">
      <app-product-item
        *ngFor="let product of products"
        [product]="product">
      </app-product-item>
    </div>
  `
})
export class ProductListComponent {}

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

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = this.appHighlight;
  }
}

Производительность

  1. Компоненты создают больше накладных расходов:

    • Собственный контекст выполнения
    • Отдельный механизм change detection
    • Инкапсуляция стилей

  2. Директивы более легковесны:

    • Работают в контексте существующего компонента
    • Нет накладных расходов на шаблон

Резюмируем

  1. Компоненты:

    • Основные строительные блоки UI
    • Собственный шаблон и стили
    • Полная изоляция и жизненный цикл

  2. Директивы:

    • Добавляют поведение к элементам
    • Нет собственного шаблона
    • Легковесные и специализированные

Выбор между ними зависит от задачи:

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

Понимание различий критически важно для:

  • Оптимального проектирования архитектуры
  • Повышения производительности приложений
  • Создания чистого и поддерживаемого кода