@Component требует представления, тогда как @Directive - нет.

Директивы

Я сравниваю @Directive с директивой Angular 1.0 с опцией restrict: 'A' strike> (Директивы не ограничиваются использованием атрибутов.) Директивы добавляют поведение к существующим Элемент DOM или существующий экземпляр компонента. Одним из примеров использования директивы будет регистрация клика по элементу.

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

@Directive({
    selector: "[logOnClick]",
    hostListeners: {
        'click': 'onClick()',
    },
})
class LogOnClick {
    constructor() {}
    onClick() { console.log('Element clicked!'); }
}

Что будет использоваться следующим образом:

I log when clicked!

Компоненты

Компонент, а не добавление / изменение поведения, фактически создает свое собственное представление (иерархия элементов DOM) с прикрепленным поведением. Примером использования этого может быть компонент карты контакта:

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

@Component({
  selector: 'contact-card',
  template: `
    

      
{{name}}
      
{{city}}
    
  `
})
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}
}

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

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

Вкратце

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

Источники:

• @Directive Documentation
• @Компонентная документация
• Полезное сообщение в блоге