Angular @HostBinding()和@HostListener()用法


Posted in Javascript onMarch 05, 2018

@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>

效果就像这样:

Angular @HostBinding()和@HostListener()用法

NOTE:别忘了把指令引入你的模块

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 #Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 #Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 #Javascript
axios拦截设置和错误处理方法
Mar 05 #Javascript
完美解决axios在ie下的兼容性问题
Mar 05 #Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 #Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 #Javascript
You might like
PHP中几个常用的魔术常量
2012/02/23 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
《美丽的小路》教学反思
2014/02/26 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
幼师大班个人总结
2015/02/13 职场文书
宣传稿格式范文
2015/07/23 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android