[Angular 2] ng-class and Encapsulated Component Styles
Angular and Class Component NG styles
2023-09-14 09:00:55 时间
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 tsconfig.json 文件里的 paths 用途
- 模块化开发 Angular 应用 [含懒加载]
- SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- Angular 面试题汇总2-Component/Service (Angular v8+)
- 使用 Angular Universal 进行服务器端渲染避免 window is not defined 的错误消息
- Angular Universal Application 应该处理 HTTP POST 请求吗?
- Angular Universal 应用避免 SSR hang 的一些指导方针
- 【Angular教程】-组件通信|8月更文挑战
- 关于 Angular 开发时对主流浏览器支持的话题
- 使用 Angular HTTP_INTERCEPTOR 拦截器来记录超时请求的一些思考
- 基于 Spartacus 的 Angular Storefront 性能优化建议
- Angular 项目中 angular.json builder 字段的可选项介绍
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- 多条件查询MySQL中使用And多条件查询的步骤(mysql中and)
- Angular 6.0 即将发布 承诺更小更快更易用
- Angular 框架将进入 2.0 时代
- MySQL中AND的使用方法解析(mysql中and的用法)
- MySQL中的AND和OR使用逻辑运算符优化查询语句(mysql中and与or)