@HostBinding和@HostListener：它们是做什么的，它们是干什么的？

在遍及全球互联网的蜿蜒曲折中，尤其是在angular.io样式文档中，我发现了许多对@HostBinding和的引用@HostListener。看来它们是非常基础的，但不幸的是，目前针对它们的文档还有些粗略。

谁能解释一下它们是什么，它们如何工作并给出用法示例？

您检查了这些官方文档吗？

HostListener-声明主机侦听器。当主机元素发出指定事件时，Angular将调用修饰的方法。

@HostListener-将监听由声明的宿主元素发出的事件@HostListener。

HostBinding-声明主机属性绑定。Angular在更改检测期间自动检查主机属性绑定。如果绑定发生更改，它将更新指令的宿主元素。

@HostBinding-将属性绑定到主机元素，如果绑定发生更改，HostBinding将更新主机元素。

注意：最近删除了两个链接。在链接返回之前，样式指南的“ HostBinding-HostListening ”部分可能是一个有用的替代方法。

这是一个简单的代码示例，可以帮助您理解这意味着什么：

演示：这是plunker中的演示- “有关@HostListener和@HostBinding的简单示例”

• 本示例将用role声明的属性绑定@HostBinding到主机的元素
  • 请记住，这role是一个属性，因为我们正在使用attr.role。
  • <p myDir><p mydir="" role="admin">当您在开发人员工具中查看时变为。
• 然后，它侦听附加在组件主机元素上的带有onClick声明的事件，每次单击都会@HostListener更改role。
  • <p myDir>单击时的更改是其开始标记<p mydir="" role="admin">在<p mydir="" role="guest">前后之间变化。

指令

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>

    We have a (HostListener) listening to this host's <b>click event</b> declared with @HostListener

    <br><br>

    And we have a (HostBinding) binding <b>the 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>View this change in the DOM of the host element by opening developer tools,
    clicking the host element in the UI. 

    The role attribute's changes will be visible in the DOM.</div> 
    `,
  directives: [HostDirective]
})
export class AppComponent {}

快速提示可以帮助我记住他们的工作-

HostBinding('value') myValue; 与...完全相同 [value]="myValue"

和

HostListener('click') myClick(){ } 与...完全相同 (click)="myClick()"

HostBinding和HostListener是用指令和其他指令编写的，(...)并且[..]是在（组件的）模板中编写的。

这是一个基本的悬停示例。

组件的模板属性：

模板

<!-- 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是，@Input如果绑定直接依赖于输入，则可以将其与之结合使用，例如：

@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;

让这个主题增加困惑的一件事是装饰器的概念并不清楚，当我们考虑类似...

@HostBinding('attr.something') 
get something() { 
    return this.somethingElse; 
 }

之所以有效，是因为它是一个get访问器。您不能使用等效的功能：

@HostBinding('attr.something') 
something() { 
    return this.somethingElse; 
 }

否则，使用的好处@HostBinding是可以确保在绑定值更改时运行更改检测。

摘要：

• @HostBinding：此装饰器将类属性绑定到宿主元素的属性。
• @HostListener：此装饰器将类方法绑定到host元素的事件。

例：

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

@Component({
  selector: 'app-root',
  template: `<p>This is nice text<p>`,
})
export class AppComponent  {

  @HostBinding('style.color') color; 

  @HostListener('click')
  onclick() {
    this.color =  'blue';
  }

}

在上面的示例中，发生以下情况：

• 将事件侦听器添加到click事件，当组件内任何地方发生click事件时将触发该事件侦听器
• 在color我们的物业AppComponent类绑定到style.color组件的财产。因此，无论何时color更新属性，style.color，组件
• 结果是，只要有人单击该组件，颜色就会被更新。

用途@Directive：

尽管可以在组件上使用这些装饰器，但通常在属性指令中使用它们。当在中使用时@Directive，主机会更改放置指令的元素。例如看一下这个组件模板：

<p p_Dir>some paragraph</p>

这里p_Dir是<p>元素上的指令。当@HostBinding或者@HostListener被指令类中使用的主机现在参考<p>。

少用术语的理论

@Hostlistnening基本上处理主机元素say（一个按钮），侦听用户的操作并执行某些功能，例如alert（“ Ahoy！”），而@Hostbinding则相反。在这里，我们在内部聆听该按钮上发生的更改（例如，单击该类发生了什么时说），然后使用该更改来做其他事情，例如发出特定的颜色。

例

想想您想在组件上创建一个收藏夹图标的场景，现在您知道必须知道该商品是否因其类更改而被收藏，我们需要一种方法来确定这一点。这正是@Hostbinding出现的地方。

还有需要知道用户实际执行了什么操作的地方，即@Hostlistening出现的位置