全国服务热线:4008-888-888

行业新闻

微信小程序模板免费_Angular @HostBinding()和@HostLis

Angular @HostBinding()()用法       本篇文章主要介绍了Angular @HostBinding()()用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

@HostBinding()()不仅仅用在自定义指令,只是在自定义指令中用的较多

本文基于Angular2+

下面我们通过实现一个在输入时实时改变字体和边框颜色的指令,()()的用法。

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
 ②:定义我们需要展示的所有可能的颜色
③:()装饰color和borderColor,用于设置样式
④:()监听宿主元素的keydown事件,为color和borderColor随机分配颜色

OK,现在就来使用我们的指令:

input appRainbow

效果就像这样:

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

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服