架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 89|回复: 0

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

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

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

  1. <p exeHighlight>
  2.    <span>高亮的文本</span>
  3. </p>
复制代码
上面 html 代码中,p 元素就是宿主元素。如果该指令应用于自定义组件中如:

  1. <exe-counter exeHighlight>
  2.     <span>高亮的文本</span>
  3. </exe-counter>
复制代码
此时 exe-counter 自定义元素,就是宿主元素。

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

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

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

  1.   @HostListener('mouseenter') mouseover() {
  2.     this.backgroundColor = 'green';
  3.   };

  4.   @HostListener('mouseleave') mouseleave() {
  5.     this.backgroundColor = 'white';
  6.   }
复制代码
  1.   @HostListener('click', ['$event.target']) onClick(btn) {
  2.     console.log("button", btn, "number of clicks:", this.numberOfClicks++);
  3.   }
复制代码
此外,我们也可以监听宿主元素外,其它对象产生的事件,如 window 或 document 或body
组件中监听全局事件 The target can be window, document or body

  1. @HostListener('document:keyup', ['$event'])
  2. handleKeyboardEvent(kbdEvent: KeyboardEvent) { ... }

  3. --------------------------------------------------------------------------
复制代码
  1. @HostBinding() innerText = 'Hello, Everyone!';
  2. @HostBinding('attr.role') role = 'button';
  3. @HostBinding('class.pressed') isPressed: boolean;
  4. @HostBinding('style.backgroundColor') get setColor() { return this.backgroundColor; }; private backgroundColor = 'white';
复制代码



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

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

  1. import { Directive, HostBinding, HostListener } from '@angular/core';

  2. @Directive({
  3.   selector:'[appRainbow]'    // ①
  4. })
  5. export class RainbowDirective{
  6. possibleColors = [
  7.     'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff',
  8.     'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'
  9.   ];                        // ②
  10. @HostBinding('style.color') color: string;
  11. @HostBinding('style.borderColor') borderColor: string;     // ③
  12. @HostListener('keydown') onKeydown() {     // ④
  13.       const colorPick = Math.floor(Math.random()*this.possibleColors.length);
  14.       this.color = this.borderColor = this.possibleColors[colorPick];
  15.   }
  16. }
复制代码
说一下上面代码的主要部分:
①:为我们的指令取名为appRainbow
②:定义我们需要展示的所有可能的颜色
③:定义并用@HostBinding()装饰color和borderColor,用于设置样式
④:用@HostListener()监听宿主元素的keydown事件,为color和borderColor随机分配颜色

在页面上使用这个指令:

  1. <input appRainbow>
复制代码
效果如下:







上一篇:SM2数字签名验签的原理
下一篇:js 判断js函数、变量是否存在
帖子永久地址: 

架构师_程序员 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与架构师_程序员享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和架构师_程序员的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、架构师_程序员管理员和版主有权不事先通知发贴者而删除本文

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

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

Mail To:help@itsvse.com

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

GMT+8, 2019-7-17 14:21

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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