Question

Angular中@Component和@Directive之间有什么区别？他们两个似乎都做同样的任务，并具有相同的属性。

有哪些用例以及何时优先使用另一个？

Answer 1

<强>零件

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

<强>指令

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

来源：

http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

Answer 2

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

Answer 3

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

Answer 4

更改检测

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

Answer 5

在编程环境中，伪指令为编译器提供了指导，以改变其处理输入的方式，即更改某些行为。

“指令允许您将行为附加到DOM中的元素。”

指令分为3类：

属性
结构
组件

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

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

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

因此，在摘要指令中，我们将行为附加到DOM中的元素的机制，包括：属性和组件类型。
组件是指令的特定类型，它使我们能够利用 Web组件功能 AKA可重用性- 封装的，可重复使用的元素在我们的整个应用程序中都可用。

Answer 6

If you refer the official angular docs

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

There are three kinds of directives in Angular:

Components—directives with a template.
Structural directives—change the DOM layout by adding and removing DOM elements. e.g *ngIf
Attribute directives—change the appearance or behavior of an element, component, or another directive. e.g [ngClass].

As the Application grows we find difficulty in maintaining all these codes. For reusability purpose, we separate our logic in smart components and dumb components and we use directives (structural or attribute) to make changes in the DOM.

Answer 7

组件

组件是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

Answer 8

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

组件扩展指令所以每个组件都是一个指令。

组件和指令都可以具有生命周期挂钩、输入、输出、提供程序和查询。
组件还可以有视图提供程序、变更检测策略、模板、样式和视图封装。

<块引用>

我们可以使用组件来构建一个有特色的元素和指令为元素创建自定义。

Answer 9

最简单的答案

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

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

@Directive v / s @Component in Angular

9 个答案:

更改检测

组件

指令