Как использовать @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
:
- 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, где вы найдете упражнения и проекты по программированию.