这里的指令和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能够使用于非浏览器的场景,如服务器端渲染。