热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Angular2笔记(二)--指令

3.核心概念2.指令组件也是指令的一种,组件是继承与指令,不同在于:组件是自身带有模版的,指令没有,指令是起作用于组件上的模版指令分为两种:属性指令改变组件模版的外观或者行为,如

3.核心概念


2.指令

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

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

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

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


推荐阅读
author-avatar
神秘的绝代双角
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有