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, ElementRef, 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;
}
}