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; }
时间: 2024-10-03 14:56:50