Angular4 - component和directive的区别

指令

在AngularJS 1.x版本很重要的一个部分 - 指令，用过AngularJS的同学都不陌生（这是废话）。也写过很多自定义指令。如果你学习了Angular2或者以上版本（后文我们就特指Angular4），可能会觉得Component就是之前的指令，那么问题来了，Angular4中的component和directive有什么区别？本文将详细的对比二者区别；

AngularJS1.x中指令用法

AngularJS1.x版本中的指令具有2个用法

（1）在已经存在的dom元素上添加一些行为

（2）创建一个组件，附上一些行为

明确划分

在Angular4（在Angular2中就有，再次说明下，后面为了不再繁琐的说Angular2或者Angular4，统一称为Angular4） 中将二者明确的划分出来，component的用途是创建一个组件并附上一些行为，而directive则是在已经存在的dom元素上附加一些行为；二期详细区别如下：

（1）component使用的注解@Component修饰，directive使用注解@Directive来修饰

（2）component是通过组件化思想，基于组件来创建应用，把应用划分成细小的各个可重复使用的组件，遵循DRY原则（Don't repeat youself！），directive是用来在已经存在的dom元素上实现一些行为

（3）component是可重复使用的组件，directive是可重复使用的行为

（4）component有创建一个视图view，即有template或者templateUrl，directive则没有。

举例说明：

下图是一个指令，用以实现元素的“有无”，通过指令*showAuthed=“true/false”来实现不同权限状态下改dom元素的有无；可重复使用，这指令可以放在应用中的任何一个已存在的dom元素上，来根据权限状态来控制元素的有无，非常方便