主机绑定和主机监听

@HostListener是回调/事件处理程序方法的装饰器,所以删除;此行的末尾:

@HostListener('click', ['$event.target']);

这是我通过复制API文档中的代码生成的一个有效的plunker,但为了清楚起见,我将该方法放在同一行:onClick()

import {Component, HostListener, Directive} from 'angular2/core';

@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: 'my-app',
  template: `Increment`,
  directives: [CountClicks]
})
export class AppComponent {
  constructor() { console.clear(); }
}

主机绑定也可用于监听全局事件:

要侦听全局事件,必须将目标添加到事件名称.目标可以是窗口,文档或正文(参考)

@HostListener('document:keyup', ['$event'])
handleKeyboardEvent(kbdEvent: KeyboardEvent) { ... }

这是使用它们的简单示例:

从'@ angular/core'导入{Directive,HostListener,HostBinding};

@Directive({
  selector: '[Highlight]'
})
export class HighlightDirective {
  @HostListener('mouseenter') mouseover() {
    this.backgroundColor = 'green';
  };

  @HostListener('mouseleave') mouseleave() {
    this.backgroundColor = 'white';
  }

  @HostBinding('style.backgroundColor') get setColor() {
     return this.backgroundColor;
  };

  private backgroundColor = 'white';
  constructor() {}

}

介绍:

HostListener可以将事件绑定到元素.

HostBinding可以将样式绑定到元素.

这是指令,所以我们可以使用它

一些文字

所以根据调试,我们可以发现这个div已被绑定样式="background-color:white"

一些文字

我们也可以发现这个div的EventListener有两个事件:mouseenter和mouseleave.因此,当我们将鼠标移动到div中时,颜色将变为绿色,鼠标离开,颜色将变为白色.