HostListener/HostBinding vs host метадата
Официальное руководство рекомендует использовать декораторы @HostListener и @HostBinding.
Свойство, связанное с @HostBinding, или метод, связанный с @HostListener, могут быть изменены только в одном месте - в классе директивы/компонента. Если вы используете host свойство метаданных, вы должны поправить код в 2 местах:
- объявление свойства/метода в классе директивы/компонента
- метаданные в декораторе, связанные с директивой
host
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hello',
template: `<p>hello</p>`,
styles: [`:host(.some-class) { color: red; }`],
host: {
'[attr.role]': 'role',
'(mouseenter)': 'onMouseEnter()',
'(click)': '_toggle($event)',
'[class.some-class]': 'someField',
'class': 'one two three',
'style': 'display: inline-block;',
}
})
export class HelloComponent implements OnInit {
role = 'main';
someField = false;
ngOnInit() {
setTimeout(() => {
this.someField = true;
}, 500);
}
onMouseEnter() {
console.log('HelloComponent onMouseEnter');
}
}@HostBinding / @HostListener
import { Component, OnInit, HostBinding, HostListener } from '@angular/core';
@Component({
selector: 'app-world',
template: `<p>world!</p>`,
styles: [`:host(.some-class) { color: blue; }`],
})
export class WorldComponent implements OnInit {
@HostBinding('attr.role') role = 'note';
@HostBinding('class') readonly classes = 'one two three';
@HostBinding('style') readonly staticField2 = 'display: inline-block;';
@HostBinding('class.some-class') someField = false;
@HostBinding('style.position') position = 'absolute';
@HostListener('mouseenter') onMouseEnter() {
console.log('WorldComponent onMouseEnter');
}
@HostListener('click', ['$event']) onClick(e: Event) {
this._toggle(e);
}
@HostListener('click', ['$event.target.value']) onClick(e) {
console.log(e);
}
ngOnInit() {
setTimeout(() => {
this.someField = true;
}, 750);
}
}