Angular2 指令
1. 指令说明
Angular2 指令是构成Angular2应用程序的重要组成部分,指令主要用来对模板的标签或者元素附加一些新的特性或者功能,改变一个 DOM 元素的外观或行为,Angular2指令和组件十分类似,也有由模块,注解,元数据以及组件类组成,实际上组件继承于指令,不同的是指令没有模板的信息,主要存在两种类型的指令:
l 结构型指令:会通过添加 / 删除 DOM 元素来更改 DOM 树布局
l 属性型指令:指令改变一个元素的外观或行为。
2. 结构型指令
结构性指令一般都使用的是内置的结构性指令,常见的内置结构性指令有ngIf,ngFor,ngSwitch等。这三个指令比较常用来改变DOM的结构
名称 |
用法 |
说明 |
ngIf |
<section *ngIf="showSection"> |
基于showSection表达式的值移除或重新创建部分DOM树。 |
ngFor |
<li *ngFor="let item of list"> |
把li元素及其内容转化成一个模板,并用它来为列表中的每个条目初始化视图。 |
ngSwitch ngSwitchWhen ngSwitchDefault |
<div [ngSwitch]="conditionExpression"> |
基于conditionExpression的当前值,从内嵌模板中选取一个,有条件的切换div的内容。 |
3. 属性型指令
常见的内置属性型指令有以下几个,ngModel,ngClass等
名称 |
用法 |
说明 |
ngModel |
<input [(ngModel)]="userName"> |
提供双向绑定,为表单控件提供解析和验证。 |
ngClass |
|
|
4. 自定义指令
指令主要包括模块,注解,元数据,指令类等几部分,和组件类似。
我们来实现一个简单的自定义组件的例子,当鼠标滑过移动到当前元素的时候字体变大移除的时候字体恢复原样。
4.1 模块
首先我们引入对应的模块及函数等
import { Directive, ElementRef, HostListener} from '@angular/core'; |
4.2 注解
从@angular/core中导入Directive函数后,可以使用@ Directive ()来标示组件类为一个Directive,@标示注解的一种标识,用来普通类附加对应的元数据信息。
4.3 元数据
@Directive将元数据的信息附加到类上,我们来了解一下常用的元数据信息都有哪些:
@Directive({ selector: '[fontIn]', providers: [PrService] }) |
selector:选择器名称,在组件使用过程中,充当模板中的标识,类似a标签中的a。这个属性信息是必须的,必须精确的指定在模板中所使用的标签定义,可以为属性,标签或者样式类等,本例子使用属性型指令的方式,选择器为fontIn属性。
providers:服务提供者集合,依赖注入系统的部分,配置了那些新的服务会引入到指令类中进行使用。
4.4 指令类
组件类作为组件的核心代码区域,包含了组件的逻辑以及视图的显示数据信息。
我们要实现对指定的元素的样式进行修改,当鼠标滑过移动到当前元素的时候字体变大移除的时候字体恢复原样。
(1). 首先我们在指令类的构造函数中引入ElementRef类,通过依赖注入获取当前指令所在的元素信息
constructor(elementRef: ElementRef) { this.element = elementRef.nativeElement; this.size = this.element.style.fontSize } |
(2). 引入HostListener函数,在该指令的包含元素上附加监听事件'mouseenter','mouseleave’,当鼠标事件触发是会执行指定的onMouseEnter和onMouseLeave事件。
@HostListener('mouseenter') onMouseEnter() { this.setFont(true); } @HostListener('mouseleave') onMouseLeave() { this.setFont(false); } setFont(org: boolean) { if (org) { this.element.style.fontSize = "larger"; } else { this.element.style.fontSize = this.size; } } |
最后实现的代码如下所示:
import { Directive, ElementRef, HostListener} from '@angular/core'; @Directive({ selector: '[fontIn]' }) export class FontInDirective { private element: HTMLElement; private size: string constructor(elementRef: ElementRef) { this.element = elementRef.nativeElement; this.size = this.element.style.fontSize } @HostListener('mouseenter') onMouseEnter() { this.setFont(true); } @HostListener('mouseleave') onMouseLeave() { this.setFont(false); } setFont(org: boolean) { if (org) { this.element.style.fontSize = "larger"; } else { this.element.style.fontSize = this.size; } } } |
转载于:https://www.cnblogs.com/SLchuck/p/5765611.html
Angular2 指令相关推荐
- 使用angular2 自带的指令,快捷创建服务,组件等!
为什么80%的码农都做不了架构师?>>> 使用ng 指令创建一个组件! ng g component produce 可以直接创建指令并更新app.module.ts; ng ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的" ...
- Angular2封装拖拽指令
一:创建drag.directive.ts 代码如下: /* 1.Directive提供@Directive装饰器功能. 2.ElementRef注入到指令构造函数中.这样代码就可以访问 DOM 元素 ...
- Angular2+ 结构型指令
结构型指令的职责是HTML布局. 它们塑造或重塑DOM的结构,比如添加.移除或维护这些元素. 像其它指令一样,你可以把结构型指令应用到一个宿主元素上. 然后它就可以对宿主元素及其子元素做点什么. 结构 ...
- angular2 图表指令ng2-echarts
一.安装 npm install echarts --savenpm install ng2-echarts --save 二.配置 1.angular-cli.json "scripts& ...
- 理解 angular2 基础概念和结构 ----angular2系列(二)
前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...
- Angular2:从AngularJS 1.x 中学到的经验
小编说:Angular 2 的最终版正式发布,Angular 1 的全平台继任者从此诞生.在上一篇文章中我们讨论了Web 的进化和前端开发的变革对Angular 2诞生的推动,不过不只如此, 1.x中 ...
- ng1和ng2的部分对比----angular2系列(四)
前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...
- 掌握 Angular2 的表单 - Angular2 系列 (4)
系统提示: 阅读此文大概需要我也不知道几分钟- 今天我们要带领大家走进一个新天地,那就是Angular2的表单;众所周知基本上所有的web系统都会涉及到关于表单的操作,在那些电商类的网站中,表单更是占 ...
最新文章
- 查看java源码时出现class文件而不是java文件,可能是因为java的安装路径下没有src.zip文件而是javafx-src.zip文件
- 解决SwipeRefreshLayout左右滑动事件冲突的问题
- HBase上关于CMS、GC碎片、大缓存的一种解决方案:Bucket Cache
- javascript简单介绍
- 对弈(nim-k游戏博弈)
- 需求简报_代码简报:我如何通过做自己喜欢的事情来获得顶级技术实习
- spring 第一天:1015
- tomcat处理图片或者文件不在项目里
- java中file类乱,【JAVA SE基础篇】47.file类的方法
- 前端大屏幕项目的一点思考
- 百度竞价初学者怎样才能建立一个好的思路
- IE 不支持单引号(')的实体名称(amp;apos;)
- Android的TextView设置padding无效
- Python实现SIFT算法,附详细公式推导和代码
- 多任务学习Multi-task Learning(MTL)概述
- hutool 读取扩展名文件_好多公司都要用的一些知识点Office办公软件、文件加密、文件扩展名!...
- 中国诺贝尔物理学奖所有获得者名单(转)
- 知人者智,自知者明——战胜自己才最强大(拥有一颗强大的内心,能量爆棚的内在灵魂)...
- 转Ruby on Rails的核心特性是什么
- 人到中年城府真深的人,闭嘴不说这3句话,余生安稳,福报自来
热门文章
- vue element form 表单
- python `__format__`
- SQLAlchemy 基本使用
- Hadoop HIVE 聚合查询
- pytorch transformers
- linux lvm 删除pv磁盘,如何安全的删除Linux LVM中的PV物理卷(硬盘或分区)
- WSUS补丁服务器部署详细 利用WSUS部署更新程序
- Mysql学习总结(45)——Mysql视图和事务
- Gradle学习总结——抓重点学Gradle
- Docker学习总结(8)——利用Docker开启持续交付之路