@ Directive v / s @Component in Angular

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

什么是用例，什么时候更喜欢一个呢？

Answer 1

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

指令

我将@Directive与选项restrict: 'A' （指令不限于属性的用法）相比较，将@Directive比作Angular 1.0指令 。指令将行为添加到现有DOM元素或现有组件实例。 指令的一个示例用例是logging一个元素的点击。

 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> 

组件

一个组件，而不是添加/修改行为，实际上创build了自己的视图（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构build块。

综上所述

编写一个组件，当你想创build一个具有自定义行为的UI的DOM元素的可重用的设置。 编写一个指令，当你想编写可重复使用的行为来补充现有的DOM元素。

资料来源：

• @指令性文件
• @组件文档
• 有用的博客post

Answer 2

组件

1. 要注册一个组件，我们使用@Component元数据注解。
2. Component是一个使用shadow DOM来创build被称为组件的封装可视化行为的指令。 组件通常用于创buildUI小部件。
3. 组件用于将应用程序分解为更小的组件。
4. 每个DOM元素只能有一个组件。
5. 组件中必须使用@View装饰器或templateurl模板。

指示

1. 要注册指令，我们使用@Directive元数据注释。
2. 指令用于将行为添加到现有的DOM元素。
3. 指令用于devise可重复使用的组件。
4. 每个DOM元素都可以使用许多指令。
5. 指令不使用视图。

资料来源：

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

Answer 3

组件是一个模板指令，而@Component装饰器实际上是一个@Directive装饰器，扩展了面向模板的特性。

Answer 4

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

http://learnangular2.com/components/

但是在Angular2及其以上的版本中呢？

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

Angular有三种指令：

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

https://angular.io/docs/ts/latest/guide/attribute-directives.html

所以Angular2及以上版本中发生的是指令是为元素和组件添加function的属性。

从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> 

但是组件将创build具有如下所有function的完整元素：

 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 = 'Max' } sayMyName() { console.log('My name is', this.name) } } 

你可以使用它如下：

 <my-component></my-component> 

当我们在HTML中使用标签时，这个组件将被创build，构造函数被调用并呈现。