Поиск по сайту:

Как использовать @HostBinding и @HostListener в пользовательских директивах Angular


Введение

@HostBinding и @HostListener — это два декоратора в Angular, которые могут быть очень полезны в пользовательских директивах. @HostBinding позволяет задавать свойства элемента или компонента, в котором размещена директива, а @HostListener позволяет прослушивать события в основном элементе или компоненте.

В этой статье вы будете использовать @HostBinding и @HostListener в примере директивы, которая прослушивает событие keydown на хосте.

Он установит цвет текста и границы случайным образом из набора нескольких доступных цветов.

Предпосылки

Для выполнения этого урока вам понадобятся:

  • Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
  • Некоторое знакомство с использованием компонентов Angular может быть полезным.

Это руководство было проверено с помощью Node v16.4.2, npm v7.18.1, angular v12.1.1.

Использование @HostBinding и @HostListener

Сначала создайте новый RainbowDirective.

Это можно сделать с помощью @angular/cli:

  1. 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(отключено)
  • @HostBinding(attr.role)

@HostListener с аргументом keydown прослушивает событие keydown на хосте. Мы определяем функцию, прикрепленную к этому декоратору, которая изменяет значение color и borderColor, и наши изменения автоматически отражаются на хосте.

Заключение

В этой статье вы использовали @HostBinding и @HostListener в примере директивы, которая прослушивает событие keydown на хосте.

Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.