如果你参考官方的angular文档

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

Angular中有三种指令:

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

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

组件是一个单独的单元，它封装了视图和逻辑，而指令是用来增强组件或dom元素的行为的，它没有任何模板。

组件扩展指令，因此每个组件都是指令。

组件和指令都可以有生命周期钩子、输入、输出、提供程序和查询。 组件还可以有视图提供者、changedetectionstrategy、 模板、样式和视图封装。

我们可以使用组件来构建功能元素和指令 为元素创建自定义。

指令:

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

不同类型的指令有:

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

如果你参考官方的angular文档

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

Angular中有三种指令:

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

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

简单的回答

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

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

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

指令

我把@Directive比作带有选项restrict: ' a '的Angular 1.0指令(指令不局限于属性的使用)。指令向现有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元素时，请编写一个指令。

来源:

@Directive文档 @ component文档 有用的博客文章