主机绑定和主机监听答案

【问题标题】：Host binding and Host listening主机绑定和主机监听
【发布时间】：2020-09-01 18:33:23
【问题描述】：

angular 2中如何使用主机监听和主机绑定？我尝试了如下主机监听器，但它总是显示Declaration expected 错误。

app.component.ts：

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

@Directive({
    selector: 'button[counting]'
})

class HostSample {
    public click = new EventEmitter();
    @HostListener('click', ['$event.target']);
    onClickBtn(btn){
        alert('host listener');
    }
}

@Component({
    selector: 'test',
    template: '<button counting></button>',
    directives: [HostSample]
})

export class AppComponent {
   constructor(){
   }
}

【问题讨论】：

标签： angular

【解决方案1】：

@HostListener 是回调/事件处理方法的装饰器，因此请移除此行末尾的 ;：

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

这是我通过从API docs 复制代码生成的有效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: `<button counting>Increment</button>`,
  directives: [CountClicks]
})
export class AppComponent {
  constructor() { console.clear(); }
}

主机绑定也可以用来监听全局事件：

要监听全局事件，必须在事件名称中添加一个目标。目标可以是窗口、文档或正文 (reference)

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

【讨论】：

谢谢马克。现在我发现了我的错误。我在这一行的末尾使用了分号 -> @HostListener('click', ['$event.target']);这产生了声明预期的错误。
我正在使用“模糊”事件执行此操作，它适用于 Chrome，但不适用于 IE 11。我现在正在使用 angular2 beta.8。来自角度填充物的错误：EXCEPTION: Error during evaluation of "blur" ORIGINAL EXCEPTION: TypeError: Object doesn't support this action。如果您以前没有看到过这个问题，我可以提出一个新问题，但我可能很快就必须升级到 rc。
plunker 中的例子很好；我了解装饰器 HostListener。可以省略这个装饰器来做一个按钮计数器吗？我的意思是在组件中只使用 (click) = function() ... ，我的意思是不比这种情况更清楚，只是用那个装饰器来做？
能否更新链接以供参考？那个页面已经不存在了。
@SagarDesai，他们最近对 API 文档进行了如此多的更改......而且看起来 API 文档中不再显示该评论了。这是代码注释的直接链接：github.com/angular/angular/blob/…

【解决方案2】：

这是同时使用它们的简单示例：

import {
  Directive, HostListener, HostBinding
}
from '@angular/core';

@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 可以将样式绑定到元素。
这是指令，所以我们可以将它用于
一些文字
所以根据debug我们可以发现这个div已经被绑定了 style = "背景色：白色"
一些文字
我们还可以发现这个div的EventListener有两个事件：mouseenter和mouseleave。所以当我们将鼠标移入 div 时，颜色会变成绿色，鼠标离开，颜色会变成白色。

【讨论】：

我们可以取消绑定主机监听器吗？