脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular @HostBinding() @HostListener()

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：别忘了把指令引入你的模块

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

相关文章

  • Angular 服务器端渲染错误消息localStorage is not defined解决分析

    Angular 服务器端渲染错误消息localStorage is not defined解决分析

    这篇文章主要为大家介绍了Angular 服务器端渲染错误消息localStorage is not defined解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • angularjs中ng-attr的用法详解

    angularjs中ng-attr的用法详解

    这篇文章主要给大家介绍了angularjs中ng-attr的用法,文中通过实例代码介绍的很详细，有需要的朋友可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • 总结十个Angular.js由浅入深的面试问题

    总结十个Angular.js由浅入深的面试问题

    这篇文章虽然只有10个问题，但是覆盖了angular开发中的各个方面，有基本的知识点，也有在开发过程中遇见的问题，同时也有较为开放性的问题去辨别面试者的基础水准和项目经验，注意答案仅供参考哦～
    2016-08-08
  • AngularJS基础 ng-srcset 指令简单示例

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

    本文主要介绍AngularJS ng-srcset 指令,这里对ng-srcset 指令做了详细的资料整理，附有代码示例，有需要的小伙伴可以参考下
    2016-08-08
  • AngularJS实现进度条功能示例

    AngularJS实现进度条功能示例

    这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下
    2017-07-07
  • Angular实现跨域(搜索框的下拉列表)

    Angular实现跨域(搜索框的下拉列表)

    angular.js 自带jsonp，实现跨域，下面来实现搜索框的下拉列表功能，本文思路明确，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-02-02
  • Angular 组件之间的交互的示例代码

    Angular 组件之间的交互的示例代码

    这篇文章主要介绍了Angular 组件之间的交互的示例代码，根据数据的传递方向，分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。非常具有实用价值，需要的朋友可以参考下
    2018-03-03
  • Angular浏览器插件Batarang介绍及使用

    Angular浏览器插件Batarang介绍及使用

    本篇文章主要介绍了Angular浏览器插件Batarang介绍及使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • angular将html代码输出为内容的实例

    angular将html代码输出为内容的实例

    今天小编就为大家分享一篇angular将html代码输出为内容的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Angular2使用jQuery的方法教程

    Angular2使用jQuery的方法教程

    这篇文章主要给大家介绍了关于Angular2使用jQuery的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。
    2017-05-05

最新评论