angular2 directive 學習

directive代碼：

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

@Directive({
    selector: '[myhighlight]'
})

export class MyHighlightDirective {

    @Input() highlightcolor: string;
    htmlEl: HTMLElement;

    constructor(private el: ElementRef) {
        this.htmlEl = el.nativeElement;
    }

    @HostListener('mouseenter') onMouseenter() {
        this.highlight(this.highlightcolor || 'cyan');
    }

    @HostListener('mouseleave') onMouseleave() {
        this.highlight('blue');
    }

    @HostListener('click') onClick() {
        alert(this.highlightcolor);
    }

    @HostBinding('style.width') get width() {
        return "200px";
    }

    private highlight(color: string) {
        this.htmlEl.style.backgroundColor = color;
    }

}

<div myhighlight [highlightcolor]="'red'">這是個測試類</div>