Angular4 @HostBinding @HostListener

host属性

@Component({

selector: 'jhi-project',

templateUrl: './project.html',

styleUrls: [],

host: { '(window:keydown)': 'keyboardIn put($event) ' }     //绑定事件和方法

})

export class JhiProjectComponent {

    keyboardInput(event) {

        if (event.keyCode == 65 && event.ctrlKey) {

          // ctrl + a

          ....

        }

  }

}

@HostListener

HostListener是属性装饰器，用来为宿主元素添加事件监听。

定义：

 //   HostListenerDecorator的定义 
export  interface   HostListenerDecorator {
    (eventName:   string , args?:  string  []): any;
      new  (eventName:  string , args?:  string  []): any;
} 

应用：

 //   counting.directive.ts 
import { Directive, HostListener }  from   '  @angular/core  '  ;

@Directive({
    selector:   '  button[counting]  '  
})
  class   CountClicks {
    numberOfClicks  =  0  ;

    @HostListener(  '  click  ' , [ '  $event.target  '  ])
    onClick(btn: HTMLElement) {
        console.log(  '  button  ' , btn,  '  number of clicks:  ' ,  this .numberOfClicks++ );
    }
} 

app.component.ts

import { Component}  from   '  @angular/core  '  ;

@Component({
  selector:   '  exe-app  '  ,
  styles: [`
    button {
      background: blue;
      color: white;
      border: 1px solid #eee;
    }
  `],
  template: `
     <button counting>增加点击次数</button> 
  `
})
export   class  AppComponent {}

以上代码运行结果：

此外，还可以监听宿主元素外，其他对象产生的事件，如windown或document对象。

highlight.directive.ts

import { Directive, HostListener, ElementRef, Renderer }  from   '  @angular/core  '  ;

@Directive({
    selector:   '  [exeHighlight]  '  
})
export   class   ExeHighlight {
    constructor(  private  el: ElementRef,  private   renderer: Renderer) { }

    @HostListener(  '  document:click  ' , [ '  $event  '  ])
    onClick(btn: Event) {
          if  ( this .el.nativeElement.contains( event  .target)) {
              this .highlight( '  yellow  '  );
        }   else   {
              this .highlight( null  );
        }
    }

    highlight(color:   string  ) {
          this .renderer.setElementStyle( this .el.nativeElement,  '  backgroundColor  '  , color);
    }
} 

import {HostListener}  from   '  @angular/core  '  ;

@HostListener(  '  window:keydown  ' , [ '  $event  '  ])
onKeyDown(  event  : KeyboardEvent) {
  ...
} 

 

 

app.component.ts

import { Component}  from   '  @angular/core  '  ;

@Component({
  selector:   '  exe-app  '  ,
  template: `
     <h4 exeHighlight>点击该区域，元素会被高亮。点击其它区域，元素会取消高亮</h4> 
  `
})
export   class  AppComponent {}

也可以在指定的metadata信息中，设定宿主元素的事件监听信息，示例：

counting.directive.ts

import { Directive }  from   '  @angular/core  '  ;

@Directive({
    selector:   '  button[counting]  '  ,
    host: {
        '  (click)  ' :  '  onClick($event.target)  '  
    }
})
export   class   CountClicks {
    numberOfClicks  =  0  ;

    onClick(btn: HTMLElement) {
        console.log(  '  button  ' , btn,  '  number of clicks:  ' ,  this .numberOfClicks++ );
    }
} 

 

@HostBinding

HostBinding 是属性装饰器，用来动态设置宿主元素的属性值。

定义：

export  interface   HostBindingDecorator {
    (hostPropertyName ?:  string  ): any;
      new  (hostPropertyName?:  string  ): any;
} 

 

应用：

@HostBindings( '  attr.foo  ' ) foo =  '  bar  ' 

button-press.directive.ts

import { Directive, HostBinding, HostListener }  from   '  @angular/core  '  ;

@Directive({
    selector:   '  [exeButtonPress]  '  
})
export   class   ExeButtonPress {
    @HostBinding(  '  attr.role  ' ) role =  '  button  '  ;
    @HostBinding(  '  class.pressed  '  ) isPressed: boolean;

    @HostListener(  '  mousedown  '  ) hasPressed() {
          this .isPressed =  true  ;
    }
    @HostListener(  '  mouseup  '  ) hasReleased() {
          this .isPressed =  false  ;
    }
} 

app.component.ts

import { Component }  from   '  @angular/core  '  ;

@Component({
  selector:   '  exe-app  '  ,
  styles: [`
    button {
      background: blue;
      color: white;
      border: 1px solid #eee;
    }
    button.pressed {
      background: red;
    }
  `],
  template: `
     <button exeButtonPress>按下按钮</button> 
  `
})
export   class  AppComponent { }

我们也可以在指令的 metadata 信息中，设定宿主元素的属性绑定信息，具体示例如下：

button-press.directive.ts

import { Directive, HostListener }  from   '  @angular/core  '  ;

@Directive({
    selector:   '  [exeButtonPress]  '  ,
    host: {
        '  role  ' :  '  button  '  ,
        '  [class.pressed]  ' :  '  isPressed  '  
    }
})
export   class   ExeButtonPress {
    isPressed: boolean;

    @HostListener(  '  mousedown  '  ) hasPressed() {
          this .isPressed =  true  ;
    }
    @HostListener(  '  mouseup  '  ) hasReleased() {
          this .isPressed =  false  ;
    }
} 

 

查看更多关于Angular4 @HostBinding @HostListener的详细内容...