angular2系列教程(四)Attribute directives
今天我们要讲的是ng2的Attribute directives。顾名思义,就是操作dom属性的指令。这算是指令的第二课了,因为上节课的components实质也是指令。
例子
这个例子共两个指令,第一个是redify指令,能使元素的color属性变红。另外一个直接复制官网的highlight指令,但是我自己做了很多变化,来讲解写法的多样化。
@Directive
写指令,你需要从'angular2/core'中导入Directive,然后使用@Directive装饰器去装饰一个类:
app/directives.ts
import {Directive, ElementRef, Renderer} from 'angular2/core'; @Directive({ selector: '[redify]' }) export class Redify { constructor(private _element: ElementRef, private renderer: Renderer) { renderer.setElementStyle(_element.nativeElement, 'color', 'red'); } }
这段代码做了这些事:
- 在装饰器@Directive中定义选择器redify
- 在类Redify中的构造函数里面注入ElementRef,来获取当前的dom元素
- 同样注入Renderer服务来操作dom,使其color属性为红色
服务是可以注入指令的。Renderer服务提供了多种操作dom样式的方法。
事件监听
如何实现指令的事件监听呢?答案是设置host:
src/app/highlight.directive.ts
host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' }
我们在@Directive中设置host元数据,host是个对象,你可以通过host配置指令的事件监听,当事件发生,将触发相应的成员函数。本例子中,设置了鼠标进入和离开两个鼠标事件。并在类中编写相应的成员函数:
src/app/highlight.directive.ts
onMouseEnter() { this._highlight(this.highlightColor || this._defaultColor); } onMouseLeave() { this._highlight(null); }
@Input
如果需要向指令中输入什么,那么需要@input这个装饰器,从'angular2/core'中导入Input即可使用:
@Input('myHighlight') highlightColor: string; private _defaultColor = 'red'; @Input() set defaultColor(colorName:string){ this._defaultColor = colorName || this._defaultColor; }
上述代码我们做了几件事:
- 给成员变量highlightColor,装饰一个@Input('myHighlight'),使其等于从myHighlight输入的属性
- 设置一个私有成员变量_defaultColor
- defaultColor属性有个setter,可以重写_defaultColor变量,使_defaultColor等于从defaultColor属性输入的值或者其本身默认值
这都什么鬼?没有接触过装饰器的同学可能觉得不舒服。这是es7里面的语法糖,python里面也有,是一种函数式编程。装饰器实质是个函数,可以多个嵌套装饰。
指令的@Input装饰器,有两种写法:
一就是给成员变量加个装饰器:
@Input('myHighlight') highlightColor: string;
代表从myHighlight属性输入的值会赋给成员变量highlightColor。
二就是使用set,编写一个函数,重写相关的成员变量,不明白get 和set 用法的同学可以参考这个: getters and setters
private _defaultColor = 'red'; @Input() set defaultColor(colorName:string){ this._defaultColor = colorName || this._defaultColor; }
我们来两个替换一下把:
private highlightColor:string; @Input() set myHighlight(colorName:string){ this.highlightColor=colorName } @Input('defaultColor') private _defaultColor = 'red';
仍然可以运行!
使用指令
导入指令的类,然后注入组件的directives中[Redify,HighlightDirective],就可以在模板中使用指令了,这跟组件嵌套是一样的。
app/app.ts
import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {Redify} from './directives'; import {HighlightDirective} from './highlight.directive'; @Component({ selector: "app", directives:[Redify,HighlightDirective], template: ` redify: <p redify >hello,lewis</p> myHighlight: <div> <input type="radio" name="colors" (click)="color='lightgreen'">Green <input type="radio" name="colors" (click)="color='yellow'">Yellow <input type="radio" name="colors" (click)="color='cyan'">Cyan </div> <p [myHighlight]="color">Highlight me!</p> <p [myHighlight]="color" [defaultColor]="'violet'">Highlight me too!</p> ` }) export class App { constructor() { } } bootstrap(App, []) .catch(err => console.error(err));
我们可以看到<p redify >hello,lewis</p>,redify指令就是元素的一个属性而已。
而highlight则使用了[]
<p [myHighlight]="color">Highlight me!</p> <p [myHighlight]="color" [defaultColor]="'violet'">Highlight me too!</p>
我们在模板语法里面讲过,[]是单向属性绑定的语法,里面可以是任何hmtl5属性,当然也可以是我们拓展的html属性,即指令。毕竟angular仍然是“旨在拓展html能力”。
[myHighlight]="color"将成员变量color绑定在myHighlight属性中,[defaultColor]="'violet'"给defaultColor设置了'violet'的值。
教程源代码及目录
如果您觉得本博客教程帮到了您,就赏颗星吧!
https://github.com/lewis617/angular2-tutorial
angular2系列教程(四)Attribute directives的更多相关文章
- angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用
今天我们要讲的是ng2的路由系统. 例子
- angular2系列教程(一)hello world
今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...
- CRL快速开发框架系列教程四(删除数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- C#微信公众号开发系列教程四(接收普通消息)
微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...
- Android Studio系列教程四--Gradle基础
Android Studio系列教程四--Gradle基础 2014 年 12 月 18 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang ...
- NGUI系列教程四(自定义Atlas,Font)
今天我们来看一下怎么自定义NGUIAtlas,制作属于自己风格的UI.第一部分:自定义 Atlas1 . 首先我们要准备一些图标素材,也就是我们的UI素材,将其导入到unity工程中.2. 全选我们需 ...
- 黄聪:Microsoft Enterprise Library 5.0 系列教程(四) Logging Application Block
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(四) Logging Application Block 企业库日志应用程序模块工作原理图: 从上图我们可以 ...
- Fastify 系列教程四 (求对象、响应对象和插件)
Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...
- webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...
随机推荐
- 2D、3D形变
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span { ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Hawk 4.4 执行器
执行器是负责将Hawk的结果传送到外部环境的工具.你可以写入数据表,数据库,甚至执行某个特定的动作,或是生成文件等等. 在调试模式下,执行器都是不工作的.这是为了避免产生副作用.否则,每刷新一遍数据, ...
- 解决vs创建或打开C++浏览数据库文件*.sdf时发生错误的问题
VS2012, 创建或打开C++浏览数据库文件*.sdf时发生错误. IntelliSense 和浏览信息将不能用于C++项目. 请确保已安装 Microsoft SQL Server Compac ...
- FFmpeg + SoundTouch实现音频的变调变速
本文使用FFmpeg + SoundTouch实现将音频解码后,进行变调变速处理,并将处理后的结果保存为WAV文件. 主要有以下内容: 实现一个FFmpeg的工具类,保存多媒体文件所需的解码信息 将解 ...
- Log4net - 规则简介
参考页面: http://www.yuanjiaocheng.net/CSharp/csharprumenshili.html http://www.yuanjiaocheng.net/entity/ ...
- PHP设计模式(七)适配器模式(Adapter For PHP)
适配器模式:将一个类的接口转换成客户希望的另外一个接口,使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作. 如下图(借图): // 设置书的接口 // 书接口 interface BookI ...
- BPM生产安全管理解决方案分享
一.方案概述生产安全管理是企业生产管理的重要组成部分,组织实施好企业安全管理规划.指导.检查和决策,保证生产处于最佳安全状态是安全管理的重要内容和职责.H3 BPM企业生产安全管理解决方案是一套专门为 ...
- MySQL Workbench建表时 PK NN UQ BIN UN ZF AI 的含义
[转自网络]https://my.oschina.net/cers/blog/292191 PK Belongs to primary key 作为主键 NN Not Null 非空 UQ Uniqu ...
- linux常用命令(1)cd命令
1 命令格式:cd [目录名]2 命令功能切换当前目录至dirName3 常用范例3.1 进入系统根目录cd /3.2 进入上级目录cd .. 或者 cd ..//3.3 进入当前用户主目录当前用 ...