Angular2笔记(二)--指令

3.核心概念


2.指令

组件也是指令的一种,组件是继承与指令,不同在于:
组件是自身带有模版的,指令没有,指令是起作用于组件上的模版
指令分为两种:

  • 属性指令 改变组件模版的外观或者行为,如样式等
  • 结构指令 改变组件模版的DOM结构,如ngIf用来插入或者移除DOM节点

    自定义指令例子
    这里写图片描述

    使用@Directive装饰器,原理和@Component类似
    在p标签上加了highlight属性,当p标签渲染出来之后,背景颜色将会变成黄色
    ElementRef 和 Renderer是Angular2里面内置的两个重要对象
    ElementRef 在这个示例里用来获取模版元素的引用
    Renderer起着辅助渲染的作用
    这两个对象在这里都是和DOM相关的,对DOM元素进行再一次的封装为了跟DOM解耦,让Angular2适用与非浏览器的场景,如服务器端渲染

发布了64 篇原创文章 · 获赞 7 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/Pandade520/article/details/76180316