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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

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