@HostBinding和@HostListener:他们做了什么,他们是干什么用的?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (211)

在我遍布全球的interweb,现在特别是angular.io风格的文档中,我发现了许多对@HostBinding和的引用@HostListener。看起来它们很基本,但不幸的是,目前它们的文档有点粗略。

任何人都可以请解释他们是什么,他们是如何工作的,并举例说明他们的用法?

提问于
用户回答回答于

你检查过这些官方文档吗?

HostListener - 声明一个主机监听器。当主机元素发出指定的事件时,角色将调用装饰的方法。 # HostListener -将听取主元素,@HostListener声明发出该事件。

HostBinding -声明主机属性binding.Angular在更改检测期间自动检查主机属性绑定。如果绑定发生变化,它将更新指令的主机元素。 # HostBinding -将绑定属性Host元素,如果有约束力的变化,HostBinding将更新主机元素。

注意:这两个链接最近都被删除了。因此,请尝试从HostBinding-HostLiestening了解它, 因为没有适当的文档可用。

我试图为你更好的理解提供一个简单的例子,

DEMO:检查下面的示例活在plunker中 - 一个关于@HostListener和@HostBinding的简单示例

这个例子将一个role property声明与@HostBindingto 绑定,host element<p>并且监听click event声明@HostListenerhost element <p>

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 {}
用户回答回答于

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

组件的模板属性:

模板

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

扫码关注云+社区