Angular @HostBinding()和@HostListener()用法
@HostBinding()和@HostListener()在自定义指令时非常有用。@HostBinding()可以为指令的宿主元素添加类、样式、属性等,而@HostListener()可以监听宿主元素上的事件。
@HostBinding()和@HostListener()不仅仅用在自定义指令,只是在自定义指令中用的较多
本文基于Angular2+
下面我们通过实现一个在输入时实时改变字体和边框颜色的指令,学习@HostBinding()和@HostListener()的用法。
import { Directive, HostBinding, HostListener } from '@angular/core';
@Directive({
selector: '[appRainbow]'①
})
export class RainbowDirective{
possibleColors = [
'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff',
'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'
];②
@HostBinding('style.color') color: string;
@HostBinding('style.borderColor') borderColor: string;③
@HostListener('keydown') onKeydown(){④
const colorPick = Math.floor(Math.random() * this.possibleColors.length);
this.color = this.borderColor = this.possibleColors[colorPick];
}
}
说一下上面代码的主要部分:
①:为我们的指令取名为appRainbow
②:定义我们需要展示的所有可能的颜色
③:定义并用@HostBinding()装饰color和borderColor,用于设置样式
④:用@HostListener()监听宿主元素的keydown事件,为color和borderColor随机分配颜色
OK,现在就来使用我们的指令:
<input appRainbow>
效果就像这样:
NOTE:别忘了把指令引入你的模块
以上!
Angular @HostBinding()和@HostListener()用法的更多相关文章
- angular中$q.all用法
$q.all是用于执行多个异步任务进行回调,它可以接受一个promise的数组,或是promise的hash(object).任何一个promise失败,都会导致整个任务的失败. 例1:接受一个pro ...
- angular controller的一些用法
最近公司的项目是es6+angular.其中的代码格式还在逐步摸索中.感谢今天同事每天帮我解惑. 今天简单梳理一下controller的一些用法 之前看书所熟知的都是 这是最普通的一种 //html ...
- Angular @Input讲解及用法
1.什么是@input @input的作用是定义模块输入,是用来让父级组件向子组件传递内容. 2.@input用法 首先在子组件中将需要传递给父组件的变量用@input()修饰 需要在子组件ts文件i ...
- Angular JS中 Promise用法
一.Promise形象讲解A promise不是angular首创的,作为一种编程模式,它出现在1976年,比js还要古老得多.promise全称是 Futures and promises. 而在j ...
- angular $q服务的用法
Promise是一种和callback有类似功能却更强大的异步处理模式,有多种实现模式方式,比如著名的Q还有JQuery的Deffered. 什么是Promise 以前了解过Ajax的都能体会到回调的 ...
- angular中的ng-options 用法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- angular directive restrict 的用法
E 表示该指令是一个element; A 表示该指令是attribute; C 表示该指令是class; M 表示该指令是注视 实例如下: 原帖:www.thinkster.io/angularjs/ ...
- angular.js中 路由 用法及概念
在开讲之前,首先谈谈APP应用.平时我们用的app总是多页面,如果用原生安卓或者苹果,那当然很流畅啦.但是当我们用一般的html页面做移动端,简单时候我们可以用<a href="&qu ...
- angular一些冷门的用法
1.controller的第三个参数
随机推荐
- python_20_socket
什么是socket? -- 通过各种协议,发送和接收数据,实现网络通信 -- 在python3中,网络发送只能发二进制数据 OSI七层模型是什么? 应用 表示 会话 传输 网络 ...
- linkin大话面向对象--组合
继承是实现类重用的重要手段,但是它有一个最大的坏处:破坏封装.相比之下,组合也是实现类重用的重要方式,但是采用组合方式实现类重用则能提供更好的封装性.比如人有手一样,在人的类中增加一个手的属性. 何时 ...
- Win2003 设置远程连接限制数
在开发过程中,很多同事需要连接到一台Win2003服务器,但是连接人数超过了10个,就连接不上了.想设置一下连接限制数,可以如下操作: 1:在运行里面输入gpedit.msc后,弹出"本地计 ...
- DAY10-万物皆对象-2018-2-2
许久没有写了,虽然每天都有在学,但是学的东西也少了,后面难度慢慢加大,学习速度也是变慢了.这是许多天积累下来的笔记,从第一次接触对象,到慢慢去了解,现在处于还待深入了解的状态.万物皆对象,那是不是说没 ...
- 02_HTML5+CSS详解第四天
依旧是CSS部分贴个CSS主要知识点总结的链接:http://blog.csdn.net/html5_/article/details/26098273 [自己的笔记做得好乱,以前一直以为是字丑的原因 ...
- 【转】Linux查找本机默认网关
ip route show | grep 'default' | awk '{print $3}' #vim getgw.sh #!/bin/shdefault_gateway_ip=`ip rout ...
- useradd和adduser
1.Ubuntu中,adduser是一个脚本,而useradd是一个二进制程序,前者对后者进行了封装,更加智能. 2.Centos中,adduser和useradd完全相同,adduser是一个符号链 ...
- XAML: 自定义控件中事件处理的最佳实践
在开发 XAML(WPF/UWP) 应用程序中,有时候,我们需要创建自定义控件 (Custom Control) 来满足实际需求.而在自定义控件中,我们一般会用到一些原生的控件(如 Button.Te ...
- Python基础篇(八)
key words:私有变量,类静态变量,生成器,导入Python模块,r查看模块可以使用的函数,查看帮助信息,启动外部程序,集合,堆,时间模块,random模块,shelve模块,文件读取等 > ...
- BZOJ 3545: [ONTAK2010]Peaks [Splay启发式合并]
3545: [ONTAK2010]Peaks 题意:带权图,多组询问与一个点通过边权\(\le x\)的边连通的点中点权k大值 又读错题了,输出点一直WA,问的是点权啊 本题加强版强制在线了,那这道题 ...