Взаимодействие с пользователем, @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()'
}