架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 720|回复: 0

[Angular] angular 事件绑定/属性绑定 @HostListener ,@HostBinding

[复制链接]
发表于 2019-6-26 14:42:08 | 显示全部楼层
在介绍 HostListener 和 HostBinding 属性装饰器之前,我们先来了解一下 host element (宿主元素)。

宿主元素的概念同时适用于指令和组件。对于指令来说,这个概念是相当简单的。应用指令的元素,就是宿主元素。假设我们已声明了一个 HighlightDirective 指令 (selector: '[exeHighlight]'):

上面 html 代码中,p 元素就是宿主元素。如果该指令应用于自定义组件中如:

此时 exe-counter 自定义元素,就是宿主元素。

HostListener 是属性装饰器,用来为宿主元素添加事件监听。

在 Angular 中,我们可以使用 HostBinding 装饰器,实现元素的属性绑定。

该指令用于演示如何利用 HostListener 装饰器,监听用户的点击事件

此外,我们也可以监听宿主元素外,其它对象产生的事件,如 window 或 document 或body
组件中监听全局事件 The target can be window, document or body


QQ截图20190626143655.jpg

@HostBinding()和@HostListener()在自定义指令时非常有用。@HostBinding()可以为指令的宿主元素添加类、样式、属性等,而@HostListener()可以监听宿主元素上的事件。

举例:实现一个在输入时实时改变字体和边框颜色

说一下上面代码的主要部分:
①:为我们的指令取名为appRainbow
②:定义我们需要展示的所有可能的颜色
③:定义并用@HostBinding()装饰color和borderColor,用于设置样式
④:用@HostListener()监听宿主元素的keydown事件,为color和borderColor随机分配颜色

在页面上使用这个指令:

效果如下:

1000289-20180125165733022-1217809064.gif





上一篇:SM2数字签名验签的原理
下一篇:js 判断js函数、变量是否存在
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2020-7-12 21:17

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表