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

问题描述

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

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 -声明主机监听器.当主机元素发出指定事件时，Angular将调用修饰的方法.

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

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

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

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

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 -将属性绑定到主机元素，如果绑定发生更改，HostBinding将更新主机元素.

注意:最近两个链接都已删除.样式指南的" HostBinding-HostListening "部分可能是一个有用的替代方法，直到链接返回.

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:

演示:这是在plunker中进行的演示-有关@HostListener& ; @HostBinding"

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

• 此示例将role属性(用@HostBinding声明)绑定到主机的元素
  • 回想一下role是属性，因为我们使用的是attr.role.
  在开发人员工具中查看时，
  • <p myDir>变为<p mydir="" role="admin">.
  • 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.
    • 单击<p myDir>时的更改是其开始标记从<p mydir="" role="admin">更改为<p mydir="" role="guest">并返回.
    • 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屋！