参考:
https://segmentfault.com/a/1190000008878888
https://www.cnblogs.com/cme-kai/p/8352087.html
概念理解:
宿主元素,host element,适用于指令和组件,
属性装饰器
- 宿主属性,@HostBinding
export class ExeButtonPress {
@HostBinding('attr.role') role = 'button';
@HostBinding('class.pressed') isPressed: boolean;
@HostListener('mousedown') hasPressed() {
this.isPressed = true;
}
@HostListener('mouseup') hasReleased() {
this.isPressed = false;
}
}
- 宿主事件,@HostListener
@HostListener('click', ['$event.target'])
onClick(btn: HTMLElement) {
console.log('button', btn, 'number of clicks:', this.numberOfClicks++);
}