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元素上,来根据权限状态来控制元素的有无,非常方便

推荐阅读更多精彩内容