angular2 – @HostBinding和@HostListening：他们做什么,他们是

发布时间：2020-12-17 08:40:46 所属栏目：安全来源：网络整理

导读：在我的世界各地的interweb，现在特别是 angular.io style docs，我发现许多引用@HostBinding和@HostListening。看来他们是相当根本的，但不幸的是，他们的文档目前是有点粗略。任何人都可以解释他们是什么，他们如何工作，并举一个他们的用法的例子？我真诚

在我的世界各地的interweb，现在特别是 angular.io style docs，我发现许多引用@HostBinding和@HostListening。看来他们是相当根本的，但不幸的是，他们的文档目前是有点粗略。

任何人都可以解释他们是什么，他们如何工作，并举一个他们的用法的例子？我真诚地从我的心深处承诺，我已经搜索Interweb的例子，但没有找到任何有效的阐明。

这里是一个基本的悬停例子。

组件的模板属性：

template:
  `
  //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_color= "blue" ;
  }

  @HostListener('mouseleave') c_onLeaveee() {
   this.c_colorrr = "yellow" ;
  }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!