@Directive v/s @Component in Angular

Question

@Component和@DirectiveAngular有什么区别？他们似乎都做同样的任务,并具有相同的属性.

有什么用例以及何时优先使用另一个？

Answer 1

@Component需要一个视图,而@Directive则不需要.

指令

我将@Directive比作带有选项的Angular 1.0指令restrict: 'A'(指令不限于属性用法.)指令将行为添加到现有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文档
• 有用的博文

Answer 2

组件

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

指示

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

资料来源:

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

Answer 3

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

Answer 4

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

http://learnangular2.com/components/

但是在Angular2 +中有什么指令呢？

属性指令将行为附加到元素.

Angular中有三种指令:

1. 组件指令与模板.
2. 结构指令 - 通过添加和删除DOM元素来更改DOM布局.
3. 属性指令 - 更改元素,组件或其他指令的外观或行为.

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 5

@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。

Answer 6

改变检测

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

Answer 7

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

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

指令分为3类：

• 属性
• 结构性
• 零件

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

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

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

• 因此，在摘要指令中，我们将行为附加到DOM中的元素的机制，该机制由“结构”，“属性”和“组件”类型组成。
• 组件是一种特定类型的指令，它使我们能够利用Web组件的功能，即 AKA可重用性-在整个应用程序中可用的封装，可重用元素。

Answer 8

成分

组件是 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 在此处呈现

查看更多关于组件

指令

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

查看有关指令的更多信息