如果你参考官方的angular文档

https://angular.io/guide/attribute-directives

Angular中有三种指令:

组件——带有模板的指令。 结构指令——通过添加和删除DOM元素来改变DOM布局。如* ngIf 属性指令——改变元素、组件或其他指令的外观或行为。如[ngClass]。

随着应用程序的增长，我们发现很难维护所有这些代码。出于可重用的目的，我们在智能组件和哑组件中分离了逻辑，并使用指令(结构或属性)在DOM中进行更改。

组件是一个带有模板的指令，@Component装饰器实际上是一个@Directive装饰器，它扩展了面向模板的特性。

在Angular 2及以上版本中，“所有东西都是组件。”组件是 我们在页面上构建和指定元素和逻辑的主要方式， 通过添加功能的自定义元素和属性 我们现有的组件。

http://learnangular2.com/components/

但是在Angular2+中指令是做什么的呢?

属性指令将行为附加到元素上。 Angular中有三种指令: 组件——带有模板的指令。 结构性directives-change 通过添加和删除DOM元素来调整DOM布局。 属性指令——改变元素的外观或行为， 组件或另一个指令。

https://angular.io/docs/ts/latest/guide/attribute-directives.html

在Angular2和以上版本中，指令是为元素和组件添加功能的属性。

看看下面Angular.io的示例:

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

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

它会扩展你的组件和HTML元素，添加黄色背景，你可以像下面这样使用:

<p myHighlight>Highlight me!</p>

但是组件将创建具有所有功能的完整元素，如下所示:

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

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. 
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Alireza'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

你可以这样使用它:

<my-component></my-component>

当我们在HTML中使用标记时，该组件将被创建，构造函数将被调用并呈现。

指令:

指令是向元素添加额外行为的类。

不同类型的指令有:

组件:这些指令包含模板 属性指令:这些类型的指令改变元素、组件、其他指令的视图或行为 结构性指令:这些指令通过添加或删除DOM元素来改变DOM布局。

简单的回答

组件:一个主要的构建块，用于添加一些DOM元素/Html。

指令:用于在DOM元素/HTML中添加一些表达式、条件和循环。

组件

要注册一个组件，我们使用@Component元数据注释。 Component是一个指令，它使用shadow DOM创建封装的可视行为，称为组件。组件通常用于创建UI小部件。 组件用于将应用程序分解为更小的组件。 每个DOM元素只能有一个组件。 @View decorator或templateurl template在组件中是必选项。

指令

要注册指令，我们使用@Directive元数据注释。 指令用于向现有DOM元素添加行为。 指令用于设计可重复使用的组件。 每个DOM元素可以使用许多指令。 指令不使用视图。

来源:

https://www.devdiscuss.com/difference-between-component-and-directive-in-angular-2/