@HostBinding和@HostListener：他们做了什么，他们有什么用？

Question

在我遍布世界各地的互联网中，现在特别是angular.io style docs，我发现许多引用@HostBinding和@HostListener。看起来它们非常基础，但不幸的是，目前它们的文档有点粗略。

任何人都可以解释一下它们是什么，它们是如何工作的并举例说明它们的用法吗？

Answer 1

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

Puma - 声明一个主机监听器。当主机元素发出指定的事件时，Anngular将调用装饰方法。
＃ HostListener - 将侦听由@HostListener声明的host元素发出的事件。

HostListener -Declares主机属性binding.Angular在更改检测期间自动检查主机属性绑定。如果绑定发生更改，它将更新指令的host元素。
＃ HostBinding - 将属性绑定到host元素，如果绑定发生更改，HostBinding将更新host元素。

<小时/> 注意：最近都删除了这两个链接。所以，请尝试从HostBinding 了解它，因为还没有适当的文档。

我试图为你更好的理解做一个简单的例子，

DEMO：HostBinding-HostListening

此示例将使用ERROR ThreadError: Attempt to unlock a mutex which is locked by another thread声明的UPDATE claim cl, contact co SET cl.search_field = CONCAT (cl.claim_description,' ',cl.legal_basis,' ',co.NAME) WHERE cl.probable = 1 AND cl.search_field IS NULL AND co.id = cl.contact_id 绑定到role property并侦听@HostBinding host element<p>声明的click event

<强> directives.ts

@HostListener

<强> AppComponent.ts

host element <p>

Answer 2

快速提示，帮助我记住他们做了什么 -

HostBinding('value') myValue;与[value]="myValue"

完全相同

和

HostListener('click') myClick(){ }与(click)="myClick()"

完全相同

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

Answer 3

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

组件的模板属性：

<强>模板

<!-- 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" ;
  } 
}

Answer 4

关于@HostBinding的另一个好处是，如果你的绑定直接依赖于输入，你可以将它与@Input结合起来，例如：

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

Answer 5

有一件事给这个问题增加了混乱，装饰者的想法并不十分明确，当我们考虑像...这样的东西时。

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

它有效，因为它是get accessor。你不能使用等价的函数：

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

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

Answer 6

Jargons较少的理论

@Hostlistnening基本上处理主机元素说（按钮）听用户的动作并执行某个功能说警告（＆＃34; Ahoy！＆＃34;）而@Hostbinding是反过来的。在这里，我们在内部听取该按钮发生的变化（比如单击该类发生的事件时），我们使用该更改来执行其他操作，例如发出特定颜色。

示例

想想你想在一个组件上制作一个喜欢的图标的场景，现在你知道你必须知道该项是否已被收藏且其类被更改，我们需要一种方法来确定它。这正是@Hostbinding的用武之地。

需要知道@Hostlistening进入的用户实际执行的操作

Answer 7

摘要：

• @HostBinding：此装饰器将 class属性绑定到host元素的属性。
• @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>。

Answer 8

// begginers
@Component({
  selector: 'custom-comp',
  template: ` <div class="my-class" (click)="onClick()">CLICK ME</div> `,
})
export class CustomComp {
  onClick = () => console.log('click event');
}

// pros
@Component({
  selector: 'custom-comp',
  template: ` CLICK ME `,
})
export class CustomComp {
  @HostBinding('class') class = 'my-class';
  @HostListener('click') onClick = () => console.log('click event');
}

// experts
@Component({
  selector: 'custom-comp',
  template: ` CLICK ME `,
  host: {
    class: 'my-class',
    '(click)': 'onClick()',
  },
})
export class CustomComp {}

------------------------------------------------
The 1st way will result in:
<custom-comp>
   <div class="my-class" (click)="onClick()">
      CLICK ME
   <div>
</custom-comp>

The last 2 ways will result in:
<custom-comp class="my-class" (click)="onClick()">
   CLICK ME
</custom-comp>

Answer 9

方法装饰器：

@HostBinding：动态绑定自定义逻辑到 Host 元素

 @HostBinding('class.active')
 activeClass = false;

@HostListen：监听 Host 元素上的事件

@HostListener('click')
 activeFunction(){
    this.activeClass = !this.activeClass;
 }

宿主元素：

  <button type='button' class="btn btn-primary btn-sm" appHost>Host</button>