Різниця між @Component та @Directive у Angular

Яка різниця між директивами та компонентами в ангуларі? Це питання мучить багатьох фронт-енд розробників, що вивчають Angular та на початкових етапах це не зовсім ясно, коли їх використовувати.

@Directive

Зазвичай директиви – це маленькі шматки коду, які додають функціональність до існуючого елемента DOM. Вони дуже схожі на компоненти, але тільки не мають шаблону. Директива повинна мати селектор, щоб прив’язати свою функціональність елемента на сторінці. Наприклад:

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

@Directive({
  selector: '[consoleLog]'
})
export class consoleLogDirective {
  constructor() {
    //Виведення рядка в консоль.
    console.log('Це директива');
  }
}

У HTML це виглядатимуть ось так:

<p consoleLog>Я простий параграф!</p>

У цьому прикладі селектором служить атрибут. Селектор може бути за елементом або класом, або комбінацією всіх.

@Component

У фреймворку клас Component успадковується від класу Directive, тому можна сказати, що компоненти це ті ж директиви, але з додатковими можливостями. Компонент не прив’язується до елементів DOM, а натомість створює власну ієрархію елементів і з нею працює. Наприклад:

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

@Directive({
  selector: '[simpleParagraph]',
  template: `<p>Я простий параграф!</p>`
})
export class simpleParagraphComponent {
  constructor() {
    //Виведення рядка в консоль.
    console.log('Це компонент');
  }
}

Наприклад, у вашому SPA, компонент вставляється як:

<simpleParagraph></simpleParagraph>

Як видно, що компонент дуже схожий на попередню директиву. Різниця у декораторі та його властивостях. Тут властивість selector дещо відрізняється, воно визначає ім’я для тега, який використовується для вставки даного компонента в інший. А додаткова властивість template задає шаблон для вставки. Замість template, можна використовувати templateUrl та використовувати посилання на зовнішній HTML файл.

Отже, з подібністю та різницею компонентів та директивами в Angular розібралися. Коли ж їх використати? Все дуже просто. Якщо потрібно вставити великий шматок HTML зі своєю логікою і функціональністю потрібно використовувати компонент, якщо ніжно додати тільки функціональність до існуючих елементів, то – директиви.