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 相关文章推荐
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
使用vant的地域控件追加全部选项
Nov 03 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
一个简易需要注册的留言版程序
2006/10/09 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
python实现堆排序的实例讲解
2020/02/21 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
大学生学习党课思想汇报
2014/01/03 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
早读迟到检讨书
2014/01/24 职场文书
春风行动实施方案
2014/03/28 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
村道德模范事迹材料
2014/08/28 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
感谢师恩主题班会
2015/08/17 职场文书