两者都是属性装饰器。
Host Element
从单词上来说 HostListener 与 HostBinding 前面都有 Host。
什么是 Host ？
Host： 主人，东道主
可以推测 这两个单词分别 用来监听主人的一举一动，为主人新增一些属性。
Host Element 即 宿主元素。
宿主元素 即可以是 普通的标签元素，也可以是 自定义的组件。
HostListener
为宿主元素添加事件监听。
语法知识：
@HostListener(eventName,args[])
funcName(arguments) { }
eventName :click,mousemove,moueout等事件名。
args: 通过触发eventName事件获取的参数，通常是 $event:Event。
其中 arguments参数个数与 args 个数应当保持一致。
HostBinding
动态设置宿主元素属性值。
语法知识：
@HostBinding(属性值A)
属性值A更新依据的 函数 或 变量元素
下面是是一个综合例子
import { Directive, HostListener, ElementRef, Renderer, HostBinding } from '@angular/core';
@Directive({
selector: '[appCounting]',
// tslint:disable-next-line:use-host-property-decorator
host: {
'(mousemove)': 'selfMove($event.target)'
}
})
export class CountingDirective {
constructor(private el: ElementRef, private renderer: Renderer) { }
clickCounts = 0;
@HostListener('document:click', ['$event.target'])
selfClick(element: any) {
if (this.el.nativeElement.contains(event.target)) {
console.log('yes');
} else {
console.log('no');
}
}
// tslint:disable-next-line:member-ordering
@HostBinding('class.isMove')
isMove: boolean;
selfMove(btn: HTMLElement) {
this.isMove = true;
}
@HostListener('mouseout', ['$event.type'])
selfMouseOut(event, target) {
console.log(event,target)
this.isMove = false;
}
}
在组件中，常常会配合使用 ElementRef, Renderer , 获取当前元素，而不必使用 document.querySelector 原生 方法获取元素。