如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何在自定义 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];
  }

}