Angular 4 HostListener & HostBinding

HostListenerは、ホスト要素のイベントリスニングを追加するためのプロパティ・アクセラレータです.

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++);
    }
}

import { Component} from '@angular/core';
 @Component({
  selector: 'exe-app',
  styles: [`
    button {
      background: blue;
      color: white;
      border: 1px solid #eee;
    }
  `],
  template: `
     
  ` }) export class AppComponent {}

さらに、windowオブジェクトやdocumentオブジェクトなど、ホスト要素以外のオブジェクトで発生するイベントをリスニングすることもできます.具体例は次のとおりです.

  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 { Component} from '@angular/core'; @Component({
  selector: 'exe-app',
  template: `
    
この をクリックすると、 がハイライトされます。 の をクリックすると、 がハイライトされなくなります
  ` }) export class AppComponent {}