Меню ×
HostListener и HostBinding

HostListener и HostBinding

Декоратор @HostListener принимает в качестве аргумента имя события и позволяет запустить определенную функцию в тот момент, когда указанное событие наступит для данного элемента.

	
import { 
    //...
    HostListener 
} from '@angular/core';
//...
    @Directive({
    selector: '[appBetterHilight]'
    })
    export class BetterHilightDirective implements OnInit {
        //...
        @HostListener('mouseenter') onmouseenter() {
            this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red');
        }

        @HostListener('mouseleave') onmouseleave() {
            this.renderer.setStyle(this.elRef.nativeElement, 'color', 'black');
        }
    }
	

Renderer2.setStyle не плох для работы со стилями, но есть способ проще. Декоратор @HostBinding позволяет связать свойство с внутренней переменной.

	
import { 
  //..., 
  HostBinding 
} from '@angular/core';

@Directive({
  selector: '[appBetterHilight]'
})
export class BetterHilightDirective implements OnInit {
  @HostBinding('style.backgroundColor') backgroundColor: string = 'transperent'; 
  //...
  @HostListener('mouseenter') onmouseenter() {
    this.backgroundColor = 'red';
  }
  @HostListener('mouseleave') onmouseleave() {
    this.backgroundColor = 'yellow';
  }
}
	

Похожие материалы

Использование декораторов HostListener и HostBinding для реагирования на события и работы со стилями в Angular

TypeScript - это суперсет, расширяющий возможности JavaScript наличием типов, классов, интерфейсов и т.д. Браузер не умеет выполнять TypeScript файлы, по этому их нужно компилировать в JS.

В данном руководстве рассмотрим двухстороннее связывание данных. Создание динамических шаблонов, меняющих свое состояние в зависимости от действий пользователя, с помощью двухстороннего связывания данных и директивы ngIf.

наверх