@Component 需要视图，而 @Directive 不需要。

指令

我将@Directive 比作带有选项的 Angular 1.0 指令restrict: 'A'（指令不限于属性使用。）指令将行为添加到现有
DOM 元素或现有组件实例。指令的一个示例用例是记录对元素的点击。

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

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

这将像这样使用：

<button logOnClick>I log when clicked!</button>

成分

一个组件，而不是添加/修改行为，实际上创建了它自己的带有附加行为的视图（DOM 元素的层次结构）。一个示例用例可能是联系人卡片组件：

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

@Component({
  selector: 'contact-card',
  template: `
    <div>
      <h1>{{name}}</h1>
      <p>{{city}}</p>
    </div>
  `
})
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}
}

这将像这样使用：

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCard是一个可重用的 UI 组件，我们可以在应用程序的任何地方使用它，甚至在其他组件中。这些基本上构成了我们应用程序的 UI 构建块。

总之

当您想要创建一组可重用的具有自定义行为的 UI DOM 元素时，请编写一个组件。当您想编写可重用的行为来补充现有的 DOM 元素时，请编写指令。