angularjs2

import {Component} from 'angular2/core';
import {HighlightDirective} from './highlight.directive';
import {Redify} from './directives';
@Component({
    selector: "app",directives:[Redify,HighlightDirective],template: `
        <p redify >hello,liaojianguo</p>
        <div>
          <input type="radio"  (click)="color='lightgreen'">Green
          <input type="radio"  (click)="color='yellow'">Yellow
          <input type="radio"  (click)="color='cyan'">Cyan
        </div>
      <p [myHighlight]="color">Highlight me!</p>
    `
})
export class App {
    constructor() {

    }
}


                

import {Directive,ElementRef,Renderer} from 'angular2/core';

@Directive({
  selector: '[redify]'
})
export class Redify {
  constructor(private _element: ElementRef,private renderer: Renderer) {
      renderer.setElementStyle(_element.nativeElement,'color','lightgreen');
  }
}

import {Directive,Input} from 'angular2/core';

@Directive({
    selector: '[myHighlight]',host: {
        '(mouseenter)': 'onMouseEnter()','(mouseleave)': 'onMouseLeave()'
    }
})

export class HighlightDirective {

    @Input('myHighlight') highlightColor:string;

    constructor(private el:ElementRef) {
    }

    onMouseEnter() {
        this._highlight(this.highlightColor);
    }

    onMouseLeave() {
        this._highlight(null);
    }

    private _highlight(color:string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!