作者:神秘的绝代双角 | 来源:互联网 | 2023-05-18 19:03
3.核心概念2.指令组件也是指令的一种,组件是继承与指令,不同在于:组件是自身带有模版的,指令没有,指令是起作用于组件上的模版指令分为两种:属性指令改变组件模版的外观或者行为,如
3.核心概念
2.指令
组件也是指令的一种,组件是继承与指令,不同在于:
组件是自身带有模版的,指令没有,指令是起作用于组件上的模版
指令分为两种:
- 属性指令 改变组件模版的外观或者行为,如样式等
结构指令 改变组件模版的DOM结构,如ngIf用来插入或者移除DOM节点
自定义指令例子
使用@Directive装饰器,原理和@Component类似
在p标签上加了highlight属性,当p标签渲染出来之后,背景颜色将会变成黄色
ElementRef 和 Renderer是Angular2里面内置的两个重要对象
ElementRef 在这个示例里用来获取模版元素的引用
Renderer起着辅助渲染的作用
这两个对象在这里都是和DOM相关的,对DOM元素进行再一次的封装为了跟DOM解耦,让Angular2适用与非浏览器的场景,如服务器端渲染