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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 指令定义 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。  我们可以自己...
    oWSQo阅读 1,205评论 0 0
  • 今天,我和杨杰、杨钦然、黄敬婷一起去澄江抚仙湖游玩。 一大早,我和爸爸便开始收拾东西,有...
    董恩旭的简书阅读 2,124评论 0 3
  • 第二天一早,何笳进到教室后却发现万钟的座位空着,一问陈飞才知道万钟今早跟他打电话,说自己身体不舒服,今天不能来上课...
    无名字阅读 286评论 0 0
  • 我们每个人都知道自己会死,但那日子好像还遥遥无期,以至于我们并不时常考虑这件事情,甚至由于死亡太过可怕而逼迫自己忽...
    _KD阅读 3,281评论 0 0
  • 娃娃:妈妈上4点班了,妈妈让你自己掌控星星表,看到你作业按时完成,作文也受到了老师的表扬,你真了不起,妈妈小时候作...
    影子3623253阅读 92评论 0 2