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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
深入学习JavaScript中的bom
May 27 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进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
使用javascript插入样式
2016/03/14 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
python条件和循环的使用方法
2013/11/01 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
颁奖典礼主持词
2014/03/25 职场文书
驾驶员安全责任书
2014/07/22 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
新员工考核评语
2014/12/31 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫