Angular @HostBinding()和@HostListener()用法

 更新时间:2018年03月05日 14:22:56   作者:无er不乐  
本篇文章主要介绍了Angular @HostBinding()和@HostListener()用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

@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>

效果就像这样:

NOTE:别忘了把指令引入你的模块

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 深入理解Angularjs中的$resource服务

    深入理解Angularjs中的$resource服务

    大家可以知道在Angularjs中可以用$http同服务器进行通信,功能上比较简单,AngularJS还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。这篇文章主要给大家深入的介绍了Angularjs中的$resource服务。
    2016-12-12
  • angular实现页面打印局部功能的思考与方法

    angular实现页面打印局部功能的思考与方法

    这篇文章主要给大家介绍了关于angular实现页面打印局部功能的思考与方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • Angular2+如何去除url中的#号详解

    Angular2+如何去除url中的#号详解

    这篇文章主要给大家介绍了关于Angular 2+时如何去除url中#号的相关资料,文中先对#号去除的原因及方法进行详细的介绍和分析,然后通过示例代码给大家演示去除的方法,需要的朋友可以参考借鉴,下面随着小编来一起看看吧。
    2017-12-12
  • AngularJS基础 ng-selected 指令简单示例

    AngularJS基础 ng-selected 指令简单示例

    本文主要介绍AngularJS ng-selected 指令,这里对ng-selected 指令的基础资料做了详细介绍,并附有示例代码,有需要的小伙伴可以参考下
    2016-08-08
  • Angular在一个页面中使用两个ng-app的方法

    Angular在一个页面中使用两个ng-app的方法

    这篇文章主要介绍了Angular在一个页面中使用两个ng-app的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • angular 动态组件类型详解(四种组件类型)

    angular 动态组件类型详解(四种组件类型)

    这篇文章给大家讲解四种组件类型,非常不错,具有参考借鉴价值,对angular 动态组件类型感兴趣的朋友参考下吧
    2017-02-02
  • Angular中$state.go页面跳转并传递参数的方法

    Angular中$state.go页面跳转并传递参数的方法

    这篇文章主要介绍了angular中$state.go页面跳转并传递参数的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • Angular 路由route实例代码

    Angular 路由route实例代码

    下面小编就为大家带来一篇Angular 路由route实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 在AngularJS框架中处理数据建模的方式解析

    在AngularJS框架中处理数据建模的方式解析

    这篇文章主要介绍了在AngularJS框架中处理数据建模的方式,作者同时也对AngularJS使用过程中的一些"坑"作了介绍,需要的朋友可以参考下
    2016-03-03
  • @angular前端项目代码优化之构建Api Tree的方法

    @angular前端项目代码优化之构建Api Tree的方法

    这篇文章主要介绍了@angular前端项目代码优化之构建Api Tree的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论