Angular2 - Class - HostBindingMetadata_HostListenerMetadata

@HostBindingMetadata 其实就是directive 的metadata里的那个host的属性绑定
@HostListener 对应是host 的事件绑定

上个例子

@Directive({selector: '[ngModel]'})
class NgModelStatus {
  constructor(public control:NgModel) {}
  @HostBinding('[class.valid]') get valid { return this.control.valid; }
  @HostBinding('[class.invalid]') get invalid { return this.control.invalid; }
}
@Component({
  selector: 'app',
  template: `<input [(ngModel)]="prop">`,
  directives: [FORM_DIRECTIVES, NgModelStatus]
})
class App {
  prop;
}
bootstrap(App);

@Directive({selector: 'button[counting]'})
class CountClicks {
  numberOfClicks = 0;
  @HostListener('click', ['$event.target'])
  onClick(btn) {
    console.log("button", btn, "number of clicks:", this.numberOfClicks++);
  }
}
@Component({
  selector: 'app',
  template: `<button counting>Increment</button>`,
  directives: [CountClicks]
})
class App {}
bootstrap(App);

再对比下这里说的host: {[key: string]: string}; 部分
http://dreambo8563.github.io/2016/01/22/Angular2-Class-DirectiveMetadata/