具有不同类别的相同角度2 svg组件

Question

我有一个SVG灯泡按钮组件，我用布尔值绑定。 isOn

<app-status-bulb [isOn]=false></app-status-bulb>
<app-status-bulb [isOn]=true></app-status-bulb>

然后我在app-status-bulb组件中基于isOn定期添加课程。

<stop offset="1" [ngClass]="isOn ? 'on' : 'off'"/>

我的CSS看起来像这样：

stop.on {
  stop-color: #00ff00;
}


stop.off {
  stop-color: #ff1700;
}

不幸的是，这两个灯泡都是绿色的。因为最后一个组件是在true上设置的。但是当我调试{{isOn}}时，第一个设置在false上，第二个设置在true上。

如何为app-status-bulb组件获取两个单独的状态？

Answer 1

在属性绑定中使用双引号：

<app-status-bulb [isOn]="false"></app-status-bulb>
<app-status-bulb [isOn]="true"></app-status-bulb>