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实现简单的无缝滚动
Apr 15 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
通过实例了解Javascript柯里化流程
Mar 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
php将时间差转换为字符串提示
2011/09/07 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
YII框架http缓存操作示例
2019/04/29 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
Python中针对函数处理的特殊方法
2014/03/06 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
一套.net面试题及答案
2016/11/02 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
房屋公证委托书
2014/04/03 职场文书
安全生产标语
2014/06/06 职场文书
机关作风建设整改方案
2014/10/27 职场文书
大连导游词
2015/02/12 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python