如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener

简介

@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 主题页面，了解练习和编程项目。