Angular HostListener & HostBinding

　　两者都是属性装饰器。

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 原生 方法获取元素。