Взаимодействие с пользователем, @HostListener и @HostBinding¶
Кроме простой установки значений атрибутивная директива может взаимодействовать с пользователем. Для этого применяется декоратор @HostListener
.
Возьмем директиву BoldDirective
и добавим в нее взаимодействие с пользователем:
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core' @Directive({ selector: '[bold]' }) export class BoldDirective { constructor(private element: ElementRef, private renderer: Renderer2) { this.renderer.setStyle(this.element.nativeElement, 'cursor', 'pointer') } @HostListener('mouseenter') onMouseEnter() { this.setFontWeight('bold') } @HostListener('mouseleave') onMouseLeave() { this.setFontWeight('normal') } private setFontWeight(val: string) { this.renderer.setStyle(this.element.nativeElement, 'font-weight', val) } }
Декоратор @HostListener
позволяет связать события DOM и методы директивы. В частности, в декоратор передается название события, по которому будет вызываться метод. В данном случае мы привязываем события mouseenter
(наведения указателя мыши на элемент) и mouseleave
(уведение указателя мыши с элемента) к методу setFontWeight()
, который устанавливает стилевое свойство font-weight
у элемента. Если мы наводим на элемент, то устанавливается выделение жирным. При отводе мыши выделение сбрасывается.
Кроме кода директивы менять больше ничего не надо, код компонента и модуля остаются теми же.
@HostBinding¶
Еще один декоратор - @HostBinding
позволяет связать обычное свойство класса со свойством элемента, к которому применяется директива. Например, изменим код директивы следующим образом:
import { Directive, HostListener, HostBinding } from '@angular/core' @Directive({ selector: '[bold]' }) export class BoldDirective { private fontWeight = 'normal' @HostBinding('style.fontWeight') get getFontWeight() { return this.fontWeight } @HostBinding('style.cursor') get getCursor() { return 'pointer' } @HostListener('mouseenter') onMouseEnter() { this.fontWeight = 'bold' } @HostListener('mouseleave') onMouseLeave() { this.fontWeight = 'normal' } }
Инструкция @HostBinding("style.fontWeight") get getFontWeight()
связывает со свойством style.fontWeight
значение, которое возвращается этим геттером getFontWeight
. А он возвращает значение свойства fontWeight
, которое также меняется при наведении указателя мыши.
Свойство host¶
Вместо применения декораторов @HostListener
и @HostBinding
для реагирования директивы на действия пользователя мы можем определить обработчики событий в декораторе @Directive
с помощью его свойства host
. Перепишем директиву:
import { Directive, ElementRef, Renderer2 } from '@angular/core' @Directive({ selector: '[bold]', host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) export class BoldDirective { constructor(private element: ElementRef, private renderer: Renderer2) { this.renderer.setStyle(this.element.nativeElement, 'cursor', 'pointer') } onMouseEnter() { this.setFontWeight('bold') } onMouseLeave() { this.setFontWeight('normal') } private setFontWeight(val: string) { this.renderer.setStyle(this.element.nativeElement, 'font-weight', val) } }
Результат работы директивы в данном случае будет аналогичен, только теперь все события и связанные с ними обработчики определяются с помощью параметра host
:
host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' }