В чем различия между Компонентом и Директивой?

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

Компоненты

Компоненты в Angular - это основной строительный блок приложения. Каждый компонент представляет собой часть пользовательского интерфейса и состоит из:

• Класса компонента: Определяет логику и данные для компонента.
• Шаблона: HTML-разметка, которая отображает данные, определенные в классе компонента.
• Стили: CSS-стили, которые определяют внешний вид компонента.

Компоненты обычно используются для создания независимых и переиспользуемых частей интерфейса.

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>{{ title }}</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class HelloWorldComponent {
  title = 'Привет, мир!';
}

В данном примере мы создали компонент HelloWorldComponent. Он использует селектор app-hello-world, который можно использовать в других компонентах, чтобы отобразить этот компонент.

Директивы

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

Существует три типа директив:

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

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

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

В данном примере мы создали директиву HighlightDirective, которая изменяет цвет фона элемента, на который наведена мышь.

Главное различие

Главное различие между компонентами и директивами заключается в следующем:

• Компоненты - это эффективные, переиспользуемые блоки пользовательского интерфейса. Они содержат свои собственные шаблоны и стили.
• Директивы - это инструменты для изменения поведения уже существующих элементов DOM. Они не имеют своего собственного шаблона.

Когда использовать?

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

Понимание различий и правильное использование компонентов и директив является ключом к успешному разработке на Angular.