Angular 中的 @Directive 与 @Component

@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 文档

有用的博文

---

成分

要注册一个组件，我们使用@Component 元数据注解。组件是一个指令，它使用影子 DOM 来创建称为组件的封装视觉行为。组件通常用于创建 UI 小部件。组件用于将应用程序分解为更小的组件。每个 DOM 元素只能存在一个组件。 @View 装饰器或 templateurl 模板在组件中是必需的。

指示

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

资料来源：

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

---

组件是带有模板的指令，而 @Component 装饰器实际上是扩展了面向模板的功能的 @Directive 装饰器。

---

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

http://learnangular2.com/components/

但是 Angular2+ 中的指令是什么？

属性指令将行为附加到元素。 Angular 中有三种指令： 组件——带有模板的指令。结构指令——通过添加和移除 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 中的元素。”

指令分为 3 类：

属性

结构

零件

是的，在 Angular 2 中，组件是一种指令。根据文档，

“Angular 组件是指令的一个子集。与指令不同，组件总是有一个模板，并且模板中的每个元素只能实例化一个组件。”

Angular 2 组件是 Web 组件概念的实现。 Web 组件由几种不同的技术组成。您可以将 Web 组件视为使用开放 Web 技术创建的可重用用户界面小部件。

所以总而言之，指令是我们将行为附加到 DOM 中的元素的机制，由 Structural、Attribute 和 Component 类型组成。

组件是一种特定类型的指令，它允许我们利用 Web 组件功能 AKA 可重用性——在我们的应用程序中可用的封装、可重用元素。

---

变化检测

只有 @Component 可以是更改检测树中的节点。这意味着您不能在 @Directive 中设置 ChangeDetectionStrategy.OnPush。尽管如此，指令可以具有 @Input 和 @Output 属性，您可以从中注入和操作主机组件的 ChangeDetectorRef。因此，当您需要对变更检测树进行精细控制时，请使用组件。

---

成分

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

组件的示例 .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>

因为 AppTrainingComponent 在这里呈现

请参阅more about Components

指令

指令更改现有 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>

请参阅more about directives

---

如果您参考官方角度文档

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 装饰器是什么

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

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

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

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

总结一下，使用 @Directive 创建一个自定义指令，该指令可用于修改 DOM 的元素或结构。如果您想创建具有自定义行为的可重用 UI 组件，请使用 @Component。

---

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

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

组件和指令都可以有生命周期钩子、输入、输出、提供者和查询。

组件还可以具有视图提供者、更改检测策略、模板、样式和视图封装。

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

---

指令：

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

不同类型的指令是：

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

---

最简单的答案

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

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

---