@HostBinding 和@HostListener:它们是做什么的，有什么用? [英] @HostBinding and @HostListener: what do they do and what are they for?

问题描述

在我在全球互联网上的蜿蜒曲折中，尤其是 angular.io 风格的文档，我找到许多对 @HostBinding 和 @HostListener 的引用.看起来它们非常基础，但不幸的是，目前它们的文档有点粗略.

谁能解释一下它们是什么，它们如何工作并举例说明它们的用法?

解决方案

您是否查看过这些官方文档?

HostListener - 声明一个主机监听器.Angular 会在宿主元素发出指定事件时调用装饰方法.

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

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

@HostBinding - 将属性绑定到宿主元素，如果绑定发生变化，HostBinding 将更新宿主元素.<小时>

注意:这两个链接最近都被删除了.样式指南的HostBinding-HostListening"部分可能是一个有用的选择，直到链接返回.

<小时>

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

DEMO :这是 plunker 中的现场演示 - "关于@HostListener & 的简单示例;@HostBinding"

• 这个例子将一个 role 属性——用 @HostBinding 声明——绑定到宿主的元素
  • 回想一下，role 是一个属性，因为我们使用的是 attr.role.
  • <p myDir> 在开发者工具中查看时会变成 <p mydir="" role="admin">.
• 然后它侦听用 @HostListener 声明的 onClick 事件，该事件附加到组件的宿主元素，每次点击都会更改 role.
  • 点击<p myDir>时的变化是它的开始标签从<p mydir="" role="admin">变为<p mydir="" role="guest"> 并返回.

directives.ts

import {Component,HostListener,Directive,HostBinding,Input} from '@angular/core';@Directive({选择器: '[myDir]'})导出类 HostDirective {@HostBinding('attr.role') role = 'admin';@HostListener('click') onClick() {this.role= this.role === '管理员' ?客人":管理员"；}}

AppComponent.ts

import { Component,ElementRef,ViewChild } from '@angular/core';从 './directives' 导入 {HostDirective}；@成分({选择器:'我的应用'，模板:`<p myDir>宿主元素<br><br>我们有一个(HostListener)监听这个主机的<b>点击事件</b>用@HostListener 声明<br><br>我们有一个(HostBinding)绑定角色属性;使用@HostBinding 声明的宿主元素并检查主机的属性绑定更新.如果发现任何属性更改，我会更新它.</p><div>通过打开开发者工具查看宿主元素的DOM中的这个变化，单击 UI 中的宿主元素.role 属性的更改将在 DOM 中可见.</div>`，指令:[HostDirective]})导出类 AppComponent {}

In my meanderings around the world wide interweb, and now especially the angular.io style docs, I find many references to @HostBinding and @HostListener. It seems they are quite fundamental, but unfortunately the documentation for them at the moment is a little sketchy.

Can anyone please explain what they are, how they work and give an example of their usage?

解决方案

Have you checked these official docs?

HostListener - Declares a host listener. Angular will invoke the decorated method when the host element emits the specified event.

@HostListener - will listen to the event emitted by the host element that's declared with @HostListener.

HostBinding - Declares a host property binding. Angular automatically checks host property bindings during change detection. If a binding changes, it will update the host element of the directive.

@HostBinding - will bind the property to the host element, If a binding changes, HostBinding will update the host element.

---

NOTE: Both links have been removed recently. The "HostBinding-HostListening" portion of the style guide may be a useful alternative until the links return.

---

Here's a simple code example to help picture what this means:

DEMO : Here's the demo live in plunker - "A simple example about @HostListener & @HostBinding"

• This example binds a role property -- declared with @HostBinding -- to the host's element
  • Recall that role is an attribute, since we're using attr.role.
  • <p myDir> becomes <p mydir="" role="admin"> when you view it in developer tools.
• It then listens to the onClick event declared with @HostListener, attached to the component's host element, changing role with each click.
  • The change when the <p myDir> is clicked is that its opening tag changes from <p mydir="" role="admin"> to <p mydir="" role="guest"> and back.

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>

    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 和@HostListener:它们是做什么的，有什么用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！