Angular快速入门 —— 指令

指令

这里的指令和Angularjs指令并非完全的概念。

组件，宽泛地讲，它其实也是指令中的一种，因为组件是继承于指令。二者的区别是组件是自身带有模板的，而指令没有。指令是起作用于组件上的模板。指令分为两种，一种是属性指令，用来改变模板的外观行为，如样式等。第二种是结构指令，改变是模板Dom结构，如Angular2的内置指令ngIf，用来插入或者移除Dom节点。

指令示例

在模板里添加style指令，指定它的值为textColor变量，textColor是组件内的成员变量,设置它的值为”red”。

指令在某种程度上增强了组件模板的特性，是模板的扩展。Angular2提供了很多内置指令。这些指令使得模板操作非常便利。

指令也是支持自定义的，以此来满足更多的场景需求。

自定义指令

用@Directive装饰器定义指令。元数据中用中括号包着的[highlight]，这个值也是CSS3选择器。我们知道中括号是用来匹配元素属性的，所以这个指令会当做元素属性来使用。这个例子里，在P标签中使用highligt属性值，当P标签渲染出来后，背景颜色将会变成黄色。

在指令类中ElementRef和Render这两个参数类型，是Angular2中内置的两个重要对象ElementRef：在这个示例里用来获得模板元素的引用。Render：起到辅助渲染的作用，这两个对象在这里都是与Dom相关的。为什么Angular2不直接暴露对Dom元素的引用，而是对Dom又进行了一次封装？实际上Angular2有自己的考虑，这次封装主要是与Dom解耦，让Angular2能够使用于非浏览器的场景，如服务器端渲染。