Angular 2/4/5如何实现多条件ngStyle？类比AngularJS 1.x写法

嘿，我懂你想在Angular 2+里复刻AngularJS 1.x那种多条件ngStyle的需求～其实有几种简单又实用的方式，我给你拆解一下：

方法1：嵌套三元表达式（最贴近AngularJS的写法） #

你已经尝试了这种思路，只要补全语法、确保颜色值合法就行。比如把你写的代码完善一下：

<button class="button" id="btn_status" 
  [ngStyle]="darked ? {backgroundColor: '#333'} : 
                      gold ? {backgroundColor: '#ffd700'} : 
                      green ? {backgroundColor: '#2ecc71'} : 
                      {}">
  状态按钮
</button>

注意这里的darked、gold、green是你在组件TypeScript里定义的布尔变量，另外颜色值别写错啦，比如你原来写的'darked'不是合法颜色，换成实际的十六进制色值或者颜色名就行。

方法2：把样式逻辑抽到组件方法里（更易维护） #

如果条件多、样式属性复杂，把判断逻辑放到组件类的方法里会让模板更干净。比如在TS文件里写：

getButtonStyles(): { [key: string]: string } {
  if (this.darked) {
    return { backgroundColor: '#333', color: '#fff' }; // 可以同时定义多个样式属性
  } else if (this.gold) {
    return { backgroundColor: '#ffd700', color: '#000' };
  } else if (this.green) {
    return { backgroundColor: '#2ecc71', color: '#fff' };
  }
  return {}; // 默认无额外样式
}

然后模板里直接调用这个方法：

<button class="button" id="btn_status" [ngStyle]="getButtonStyles()">
  状态按钮
</button>

这种方式后期改逻辑的时候不用动模板，更适合复杂业务场景。

方法3：针对单个属性做条件判断 #

如果只是单个样式属性（比如背景色）需要多条件切换，也可以直接在对象里写属性的三元判断：

<button class="button" id="btn_status" 
  [ngStyle]="{
    backgroundColor: darked ? '#333' : 
                    gold ? '#ffd700' : 
                    green ? '#2ecc71' : 
                    'transparent'
  }">
  状态按钮
</button>

这种写法更直观，一眼就能看到目标属性的所有可能取值。

最后别忘了在组件类里定义好那些布尔变量哦，比如：

export class MyComponent {
  darked = false;
  gold = false;
  green = true; // 这里可以根据业务逻辑动态赋值
}

内容的提问来源于stack exchange，提问作者Vinod