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的写法和内置函数实 ...
随机推荐
- 应用工具 .NET Portability Analyzer 分析迁移dotnet core
大多数开发人员更喜欢一次性编写好业务逻辑代码,以后再重用这些代码.与构建不同的应用以面向多个平台相比,这种方法更加容易.如果您创建与 .NET Core 兼容的.NET 标准库,那么现在比以往任何时候 ...
- CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
- git克隆项目到本地&&全局安装依赖项目&&安装依赖包&&启动服务
一.安装本地开发环境 1.安装本项目 在需要保存到本地的项目的文件夹,进入到文件夹里点击右键,bash here,出现下图: 2.安装依赖项目 3.安装依赖包(进入到命令行) # 安装依赖包 $ ...
- .NET 基础 一步步 一幕幕[面向对象之对象和类]
对象和类 本篇正式进入面向对象的知识点简述: 何为对象,佛曰:一花一世界,一木一浮生,一草一天堂,一叶一如来,一砂一极乐,一方一净土,一笑一尘缘,一念一清静.可见"万物皆对象". ...
- ASP.NET MVC——模型绑定
这篇文章我们来讲讲模型绑定(Model Binding),其实在初步了解ASP.NET MVC之后,大家可能都会产生一个疑问,为什么URL片段最后会转换为例如int型或者其他类型的参数呢?这里就不得不 ...
- 【夯实PHP基础】nginx php-fpm 输出php错误日志
本文地址 原文地址 分享提纲: 1.概述 2.解决办法(解决nginx下php-fpm不记录php错误日志) 1. 概述 nginx是一个web服务器,因此nginx的access日志只有对访问页面的 ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- 新手学习web遇到的一些乱码问题
在新手学习web网站学习的时候经常会遇到?????这种乱码,对于刚起步的菜鸟来说真的很头痛,很容易打击继续学的信心当然了对于菜鸟的我最近也遇到过乱码问题,沉浸其中不能自拔,爱的深啊!!!!!我所遇到的 ...
- Android中Fragment和ViewPager那点事儿(仿微信APP)
在之前的博文<Android中使用ViewPager实现屏幕页面切换和引导页效果实现>和<Android中Fragment的两种创建方式>以及<Android中Fragm ...
- echo命令
linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法echo命令的功能是在显示器上显示一段文字,一般起到一个提示的 ...