angular2 directive 学习

前端之家收集整理的这篇文章主要介绍了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>

猜你在找的Angularjs相关文章