简介
@HostBinding 和 @HostListener 是 Angular 中两个在自定义指令中非常有用的装饰器。@HostBinding 允许你在承载指令的元素或组件上设置属性，而 @HostListener 则允许你监听宿主元素或组件上的事件。
在本文中，你将会在一个示例指令中使用 @HostBinding 和 @HostListener 来监听宿主上的 keydown 事件。
!输入文本后，动画显示每个字符更改颜色。消息拼写出：一种彩虹般的颜色。
它将把文本和边框颜色设置为一组可用颜色中的随机颜色。
先决条件
要完成本教程，你需要：
- 在本地安装 Node.js，你可以按照《如何安装 Node.js 并创建本地开发环境》进行操作。
- 对设置 Angular 项目和使用 Angular 组件有一定的了解可能会有所帮助。
本教程已经在 Node v16.4.2、npm v7.18.1、angular v12.1.1 下验证通过。
使用 @HostBinding 和 @HostListener
首先，创建一个新的 RainbowDirective。
可以通过 @angular/cli 完成：
ng generate directive rainbow --skip-tests
这将把新组件添加到应用程序的 declarations 中，并生成一个 rainbow.directive.ts 文件：
import {
Directive } from '@angular/core';
@Directive({
selector: '[appRainbow]'
})
export class RainbowDirective {
constructor() {
}
}
添加 @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.border-color') borderColor!: string;
@HostListener('keydown') newColor() {
const colorPick = Math.floor(Math.random() * this.possibleColors.length);
this.color = this.borderColor = this.possibleColors[colorPick];
}
}
然后可以在元素上使用该指令：
<input type="text" appRainbow />
我们的 Rainbow 指令使用了两个 @HostBinding 装饰器来定义两个类成员，一个绑定到宿主的 style.color，另一个绑定到 style.border-color。
你还可以绑定到宿主的任何类、属性或属性。
以下是一些可能绑定的更多示例：
@HostBinding('class.active')@HostBinding('disabled')@HostBinding('attr.role')
带有 'keydown' 参数的 @HostListener 监听宿主上的 keydown 事件。我们定义了一个附加到该装饰器的函数，该函数改变了 color 和 borderColor 的值，我们的更改会自动反映在宿主上。
结论
在本文中，你使用了 @HostBinding 和 @HostListener 在一个示例指令中监听宿主上的 keydown 事件。
如果你想了解更多关于 Angular 的内容，请查看我们的 Angular 主题页面，了解练习和编程项目。
