emmm,,,最近在为项目的第二阶段铺路，偶然看到directive，想想看因为项目已经高度集成了第三方组件，所以对于自定义指令方面的经验自己实在知之甚少，后面经过阅读相关资料，总结一篇关于在自定义指令中使用@HostBingDing() 和@HostListenner()。
在使用这两个属性之前，必须明白一件事，就是在angular中有三种directive：
如图所示，component与其他两个directive的一个很明显的区别就是component有template
宿主（host）
下面提到的一个宿主术语，在angular中宿主可以是component也可以是element
@HostBinding() 装饰器
设置宿主的属性，比如样式： height，width，color，margin, border等等
用法： @HostBingding()接受一个参数，这个参数用于指定宿主的属性的名字
@HostBinding('class.active') @HostBinding('disabled') @HostBinding('attr.role')
@HostListener() 装饰器
处理宿主的事件，比如mouseover, mosuout, keydown等等
用法：@HostListener() 接受一个参数，该参数用于指定宿主的事件的名字
举个例子
使用命令行生成rainbow自定指令
ng g directive rainbow
这里定义个自定义指令 raibow,directive.ts
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.border-color') borderColor: string;
@HostBinding('style.border-bottom-color') borderBottomColor: string;
@HostListener('keydown') newColor() {
const colorPick = Math.floor(Math.random() * this.possibleColors.length);
this.color = this.borderBottomColor = this.possibleColors[colorPick];
}
}
在任意宿主中使用该指令
<input type="text" appRainbow>
最终效果：
不知道为虾米动态图片上传不了，大概就是每次输入键盘input的边框和文字的颜色会随机动态改变
作者：承蒙时光
出处：http://www.cnblogs.com/timetimetime/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
