Angular2 - Directive - rotate

Posted on   |   In

需求说明

  • rotate属性
  • 当mouseenter的时候当前元素旋转
  • 实现就是加减class
import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
    selector: '[rotate]',
    host: {
        '(mouseenter)': 'onMouseEnter()',
        '(mouseleave)': 'onMouseLeave()'
    }
})
export class RotateDirective {
    constructor(private el: ElementRef, private renderer: Renderer) {
    }
    onMouseEnter() { this._rotate(true); }
    onMouseLeave() { this._rotate(false); }
    private _rotate(run: boolean) {
        this.renderer.setElementClass(this.el, 'rotate', run);
    }
}

尽量用render的方法来操作虚拟DOM。不要直接改DOM