Angular 主机绑定和主机侦听

如何在angular 2中使用主机侦听器和主机绑定？ 我像下面一样尝试了主机侦听器，但它总是显示一个

声明预期的

错误

app.component.ts：

从'angular2/core'导入{Component，EventEmitter，HostListener，Directive}；
@指示({
选择器：“按钮[计数]”
})
类主机样本{
public click=neweventemitter（）；
@HostListener（'单击'，['$event.target']）；
onClickBtn（btn）{
警报（“主机侦听器”）；
}
}
@组成部分({
选择器：“测试”，
模板：“”，
指令：[主机样本]
})
导出类AppComponent{
构造函数（）{
}
}

@HostListener

是回调/事件处理程序方法的装饰程序，因此请删除

在此行末尾：

@HostListener（'click'，['$event.target']）；

下面是我通过从复制代码生成的工作，但为了清晰起见，我将
onClick（）
方法放在同一行：

从'angular2/core'导入{Component，HostListener，Directive}；
@指令（{选择器：'按钮[计数]}）
类计数单击{
点击次数=0；
@HostListener（'click'，['$event.target']）onClick（btn）{
console.log（“按钮”，btn，“点击次数：”，this.numberOfClicks++）；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`Increment`，
指令：[点击次数]
})
导出类AppComponent{
构造函数（）{console.clear（）；}
}


主机绑定还可用于侦听全局事件：

要侦听全局事件，必须在事件名称中添加目标。
目标可以是窗口、文档或正文（）

@HostListener（'document:keyup'，['$event']））
handleKeyboardEvent（kbdEvent:KeyboardEvent）{…}
这是一个简单的例子，可以同时使用它们：

导入{
指令，主机侦听器，主机绑定
}
从“@angular/core”开始；
@指示({
选择器：“[突出显示]”
})
导出类highlight指令{
@HostListener（'mouseenter'）mouseover（）{
this.backgroundColor='绿色'；
};
@HostListener（'mouseleave'）mouseleave（）{
this.backgroundColor='白色'；
}
@HostBinding（'style.backgroundColor'）获取setColor（）{
返回此.backgroundColor；
};
私人背景色='白色'；
构造函数（）{}
}

导言：

HostListener可以将事件绑定到元素


HostBinding可以将样式绑定到元素


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

一些文本

因此，根据调试，我们可以发现这个div已经绑定
style=“背景色：白色”

一些文本

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


谢谢你，马克。现在我发现了我的错误。我在这一行的末尾使用了分号->@HostListener（'click'，['$event.target']）；这产生了预期的错误。我用一个“模糊”事件来做这件事，它在Chrome中工作，但在IE 11中不工作。我现在正在使用angular2 beta.8。角度多边形填充出错：
异常：计算“模糊”时出错原始异常：TypeError:对象不支持此操作
。如果你以前没有见过，我可以提出一个新问题，但我可能很快就要升级到rc了；我了解装饰师。仅仅为了做一个按钮计数器就可以省略这个装饰器吗？我的意思是，在组件中，仅使用（单击）=函数（），我的意思是没有比这个案例更清楚的了，就用那个装饰师吧？你能更新链接到参考吗？那个页面已经不存在了。@SagarDesai，他们最近改变了很多API文档。。。而且API文档中不再显示该注释。这里有一个到代码注释的直接链接：我们可以解除主机侦听器的绑定吗？