[Angular Directive] 3. Handle Events with Angular 2 Directives

标签：user   led   pass   handle   add   com   hand   imp   date   

A @Directive can also listen to events on their host element using @HostListener. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component.

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

@Directive({
  selector: ‘[clickable]‘
})
export class ClickableDirective {
  @Input(‘clickable‘) text;
  @HostBinding() get innerText() {
    if(this.text) {
      return this.text;
    }
  }
  @HostListener(‘click‘, [‘$event‘]) onClick(event) {
    console.log(event); //MouseEvent
    this.text = event.clientX;
  }
}

We can add HostListener on the host element, and get ‘$event‘ pass to our handler function ‘onClick‘. Inside the function we are able to change the innerText of the directive.

[Angular Directive] 3. Handle Events with Angular 2 Directives

标签：user   led   pass   handle   add   com   hand   imp   date   

原文地址：http://www.cnblogs.com/Answer1215/p/6206207.html