标签：
import {Input, Component, View, NgClass} from "angular2/angular2";
@Component({
selector: ‘todo-item-render‘
})
@View({
directives: [NgClass],
styles: [`
.started{
color: green;
}
.completed {
text-decoration: line-through;
}
`],
template: `
<div>
<span [ng-class]="todoinput.status">{{todoinput.title}}</span>
<button (click)="todoinput.toggle()">Toggle</button>
</div>
`
})
export class TodoItemRender{
@Input() todoinput: TodoModel;
}
Many Components require different styles based on a set of conditions. Angular 2 helps you style your Components by allows you to define Styles inline, then choosing which styles to use based on the current values in your Controller.
You can define a static var on the TodoModel:
export class TodoModel{ static STARTED: string = "started"; static COMPLETED: string = "completed"; status: string = TodoModel.STARTED; constructor( public title: string = "" ){} toggle(): void{ if(this.status === TodoModel.STARTED) this.status = TodoModel.COMPLETED; else this.status = TodoModel.STARTED; } } export class TodoService{ todos: TodoModel[] = [ new TodoModel(‘eat‘), new TodoModel(‘sleep‘), new TodoModel(‘work‘) ]; addTodo(value: TodoModel):void { this.todos.push(value); } }
Then in the todoItemRender, you can require TodoModel and use the static var:
import {Input, Component, View, NgClass} from "angular2/angular2";
import {TodoModel} from ‘./todoService‘;
@Component({
selector: ‘todo-item-render‘
})
@View({
directives: [NgClass],
styles: [`
.${TodoModel.STARTED}{
color: green;
}
.${TodoModel.COMPLETED}{
text-decoration: line-through;
}
`],
template: `
<div>
<span [ng-class]="todoinput.status">{{todoinput.title}}</span>
<button (click)="todoinput.toggle()">Toggle</button>
</div>
`
})
export class TodoItemRender{
@Input() todoinput: TodoModel;
}
[Angular 2] ng-class and Encapsulated Component Styles
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/4916189.html
