在Angular 6中,可以使用ngStyle
指令来根据不同的状态设置文本颜色。
首先,在组件中定义一个属性,用于保存当前的状态。例如:
currentStatus: string = 'active';
然后,在模板中使用ngStyle
指令来设置文本颜色。例如:
Hello World
在组件中,定义一个方法getStatusColor()
来根据不同的状态返回相应的颜色。例如:
getStatusColor() {
if (this.currentStatus === 'active') {
return 'green';
} else if (this.currentStatus === 'inactive') {
return 'red';
} else {
return 'blue';
}
}
这样,根据不同的状态,文本颜色将会被动态设置为相应的颜色。
完整的组件代码示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Hello World
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
currentStatus: string = 'active';
getStatusColor() {
if (this.currentStatus === 'active') {
return 'green';
} else if (this.currentStatus === 'inactive') {
return 'red';
} else {
return 'blue';
}
}
}
这样,根据currentStatus
属性的不同值,文本颜色将会被设置为相应的颜色。