HostListener&HostBinding的使用

参考：
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++);
    }