如果你参考官方的angular文档

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

Angular中有三种指令:

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

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

组件

组件是Angular应用中最基本的UI构建块。Angular应用中包含一个Angular组件树。我们在Angular中的应用是构建在一个组件树上的。每个组件都应该有自己的模板、样式、生命周期、选择器等等。因此，每个组件都有自己的结构，你可以将它们视为一个独立的小型web应用程序，有自己的模板和逻辑，并有可能与其他组件通信和一起使用。

Component的.ts文件示例:

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

@Component({
    // component attributes
    selector: 'app-training',
    templateUrl: './app-training.component.html',
    styleUrls: ['./app-training.component.less']
})

export class AppTrainingComponent {
    title = 'my-app-training';
}

以及它的。/app.component.html模板视图:

Hello {{title}}

然后你可以在其他组件中呈现AppTrainingComponent模板及其逻辑(在将其添加到模块后)

<div>
   <app-training></app-training>
</div>

结果就是

<div>
   my-app-training
</div>

as AppTrainingComponent在这里被渲染

有关组件的详细信息

指令

指令更改现有DOM元素的外观或行为。例如[ngStyle]是一个指令。指令可以扩展组件(可以在组件内部使用)，但它们不能构建整个应用程序。假设它们只支持组件。它们没有自己的模板(当然，您可以使用它们来操作模板)。

示例指令:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

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

及其用法:

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

查看更多关于指令的信息

在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中使用标记时，该组件将被创建，构造函数将被调用并呈现。

如果你参考官方的angular文档

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

Angular中有三种指令:

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

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

这是Angular 13的最新更新

@Component只是@Directive的一个子类。在深入研究这个问题之前，我们必须了解什么是@Directive…

@Directive是一个装饰器，用于指示DOM添加新元素或删除或修改现有元素。因此，无论何时Angular遇到任何装饰器，它都会在运行时处理它们，并根据它们修改DOM。

我们可以使用@Directive创建我们的指令，如下所示

@Directive({
  selector: '[demoButtonColor]'
})
export class DemoButtonColorDirective {
  constructor(private elementRef: ElementRef) { };
  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }
}

在HTML中使用

<button demoButtonColor>RED BUTTON</button>

现在让我们看看什么是@Component decorator

@Component是@Directive的一个子类，有一个额外的功能。使用@Component，我们可以创建HTML模板，它可以在运行时注入到DOM中。

@Component({
  selector: 'demo-color',
  template: '<h1>Hello There!</h1>'
})
class DemoColorComponent {}

我们可以在任何其他组件中重用它，如下所示

<div>
  <demo-color></demo-color>
</div>

要将其包装起来，使用@Directive创建一个可用于修改DOM元素或结构的自定义指令。如果你想创建具有自定义行为的可重用UI组件，请使用@Component。

简单的回答

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

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