AngularJS中指令和组件的区别

在这篇文章中，我们将看到什么是Angular JS中的指令和组件，同时找到指令和组件之间的相关区别，了解它们的行为特征，以构建强大的Angular JS代码。

Directives是随着Angular的发明而被引入的，作为构建动态Web应用的结构框架。指令在操作DOM（即文档对象模型）和创建属于DOM的新的自定义元素方面很受欢迎。随着技术的升级和Angular后期版本的各种修改（Angular 2和更高版本，因为Angular 2本身就是依赖于基于组件的结构）。现在，开发者对组件的使用产生了极大的兴趣。另外，组件被称为是指令的简化版本。

指令是当AngularJs的HTML编译器($compile)在DOM中发现它时被调用的函数。它告诉将指定的行为附加到该DOM元素上（例如通过事件监听器），或者甚至改造该DOM元素及其子元素。

语法:

import {Directive} from 'angular2/angular2';
@Directive({........
            ........})

例子：这个例子描述了AngularJS中Directive的基本用法。

import {Directive} from 'angular2/angular2';
 
@Directive({
    selector: "[myDirective]",
    hostListeners: {
        'click': 'showMessage()'
    }
})
class Message {
 
    constructor() {}
 
    showMessage() {
    console.log('This is an example of directive'); }
}
 
<button>GeeksforGeeks</button>

输出:

Geeksforgeeks
This is an example of directive

组件只是指令的一个简化版本。更确切地说，Components可以被称为一种带有模板的特殊指令，它主要用于基于组件的架构。与普通指令相比，组件可以被用来做更简单的配置。它有助于我们编写组件指令，并进一步利用它来使升级到Angular更容易。在某些情况下，组件的使用是没有好处的，例如，当我们需要一个高级的指令定义选项，如优先级、多元素或终端，或者简单地说，当我们希望特定的指令是由特定的属性或CSS类触发的，而不是一个元素。

语法:

import {Component, View} from 'angular2/angular2';
@Component ({........
            ........ })
@View ({............
         ...........})

例子：这个例子描述了AngularJS中Component的基本用法。

import {Component, View} from 'angular2/angular2';
@Component({
selector: 'message'
})
@View({
template: `
    <h6>Hello GeeksforGeeks</h6>
    <h6>This is an example of component</h6> `
})
class Message {
constructor(public version: string) {}
}

输出:

Hello GeeksforGeeks
This is an example of component

解释：在上面的例子中，我们已经看到了如何编写简单的Angular代码来打印一些信息，包括使用Component和Directive。在Component的例子中，我们看到必须要写视图属性，而对于Directive，我们不需要使用视图或模板。

**AngularJS中指令和组件的区别： **

Components	Directives
组件总是一个元素（’E’）。模板是强制性属性，在Component中总是需要的。	该指令可以是一个属性、元素名称、注释或CSS类（’E’、’A’、’C’、’M’）。该指令并不总是需要模板。
组件是用来将应用程序分解成更小的组件。这就是为什么组件在Angular的后期版本中被广泛使用，以使事情变得简单并建立一个完全基于组件的模型。	该指令用于设计可重复使用的组件，这些组件更加面向行为。
由于该组件有视图，所以可以定义viewEncapsulation。	指令中没有视图。所以你不能在指令中使用viewEncapsulation。
尽管组件使编写简单有效的代码变得更容易，它的配置比普通指令更简单，但它对基于组件的架构进行了优化。一个组件不支持 “编译 “和 “预链接 “功能。	可以利用这些指令来操作DOM对象。
组件不应该修改任何超出其自身范围的数据或DOM。	指令有独立的作用域，默认情况下，子指令继承其父指令的作用域。
每个DOM元素只能有一个组件。	一个DOM元素中可以有一个以上的指令。
为了注册组件，我们使用@Component元数据注解。	对于指令，我们使用@Directive元数据注解。