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 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
python实现同一局域网下传输图片
2020/03/20 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
各营销点岗位职责范本
2014/03/05 职场文书
财务检查整改报告
2014/11/06 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
儿子满月酒致辞
2015/07/29 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
SQL Server使用导出向导功能
2022/04/08 SQL Server