Angular4 @HostBinding @HostListener

host屬性

@Component({

selector: 'jhi-project',

templateUrl: './project.html',

styleUrls: [],

host: { '(window:keydown)': 'keyboardInput($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;
    }
}