@HostBinding和@HostListener：他们做什么和他们是什么？
在我广泛的interweb，现在特别是angular.io风格的文档中 ，我发现了许多对@HostBinding和@HostListener引用。 看起来它们是非常基础的，但不幸的是，目前它们的文档有点粗略。
任何人都可以请解释他们是什么，他们是如何工作的，并举例说明他们的用法？
你有没有检查这些官方文档？
HostListener – 声明一个主机监听器。当host元素发出指定的事件时， Angular将调用装饰的方法。
＃HostListener – 将监听由@HostListener声明的host元素发出的事件。
HostBinding -声明主机属性binding.Angular在更改检测期间自动检查主机属性绑定。 如果绑定发生变化，它将更新指令的主机元素。
＃HostBinding – 将属性绑定到主机元素，如果绑定更改，HostBinding将更新主机元素。
注意：这两个链接最近都被删除了。所以，请尝试从HostBinding-HostLiestening了解它，因为没有适当的文档可用。
我试图做一个简单的例子，让你更好的理解，
DEMO： 检查下面的例子住在plunker – 关于@HostListener和@HostBinding的简单例子
此示例将使用@HostBinding声明的role property @HostBinding到host element<p>并侦听使用host element <p> @HostListener声明的click event
directives.ts
import {Component,HostListener,Directive,HostBinding,Input} from '@angular/core'; @Directive({selector: '[myDir]'}) export class HostDirective { @HostBinding('attr.role') role = 'admin'; @HostListener('click') onClick() { this.role=this.role=='admin'?'guest':'admin'; } }
AppComponent.ts
import { Component,ElementRef,ViewChild } from '@angular/core'; import {HostDirective} from './directives'; @Component({ selector: 'my-app', template: ` <p myDir>Host Element <br><br> I'm(HostListener) listening to host's <b>click event</b> declared with @HostListener <br><br> I'm(HostBinding) binding <b>role property</b> to host element declared with @HostBinding and checking host's property binding updates, If any property change is found, I will update it. </p> <div> Open DOM of host element, click host element(in UI) and check role attribute(in DOM) </div> `, directives: [HostDirective] }) export class AppComponent {}
这是一个基本的hover示例。
组件的模板属性：
模板
<!-- attention, we have the c_highlight class --> <!-- c_highlight is the selector property value of the directive --> <p class="c_highlight"> Some text. </p>
和我们的指令
import {Component,HostListener,Directive,HostBinding} from '@angular/core'; @Directive({ // this directive will work only if the DOM el has the c_highlight class selector: '.c_highlight' }) export class HostDirective { // we could pass lots of thing to the HostBinding function. // like class.valid or attr.required etc. @HostBinding('style.backgroundColor') c_colorrr = "red"; @HostListener('mouseenter') c_onEnterrr() { this.c_colorrr= "blue" ; } @HostListener('mouseleave') c_onLeaveee() { this.c_colorrr = "yellow" ; } }
@HostBinding另一个@HostBinding是，如果你的绑定直接依赖于一个input，你可以把它和@Input结合起来，例如：
@HostBinding('class.fixed-thing') @Input() fixed: boolean;
一个快速的提示，帮助我记住他们做什么 –
HostBinding('value') myValue; 与[value]="myValue"
和
HostListener('click') myClick(){ }与(click)="myClick()"完全一样(click)="myClick()"
HostBinding和HostListener是用指令编写的，其他的(...)和[..]写在模板（组件）的内部。
理论lessJargons
@Hostlistnening基本上与主机元素说（一个button），听用户的行动，并执行某个function说alert（“啊！”），而@Hostbinding是相反的。 在这里，我们听取内部button上发生的变化（说出什么时候点击了class级发生的事情），然后我们使用该变化来做其他事情，比如发出特定的颜色。
例
想想你想在组件上制作一个最喜欢的图标的场景，现在你知道你将不得不知道这个项目是否已经被改变了，我们需要一种方法来确定这个。 这正是@Hostbinding进来的地方。
而且在哪里需要知道用户实际执行的操作是@Hostlistening进来的地方
@micronyks，非常好的例子，非常感谢。 我想我应该在这里添加一个对风格指南的参考
有一件事给这个问题增添了疑惑，装饰者的想法不是很清楚，当我们考虑像…
@HostBinding('attr.something') get something() { return this.somethingElse; }
它工作，因为它是一个get访问者 。 你不能使用相同的function：
@HostBinding('attr.something') something() { return this.somethingElse; }
否则，使用@HostBinding的好处是确保在绑定值更改时运行更改检测。
