NativeScript/Angular - 使用ngModel/FormBuilder時如何在交換機上設置已檢查狀態的樣式？

Question

考慮這個開關：

<Switch class="switch" formControlName="answer"></Switch> 

如果我這樣做，它只能當你沒有激活改用的，其後的背景顏色將始終是相同的，即使開關未激活：

.switch[checked=true] { 
    background-color: #FE4A49; 
    color: #FE4A49; 
} 

如果我這樣做：

.switch { 
    background-color: #FE4A49; 
    color: #FE4A49; 
} 

那麼背景將永遠是不管的狀態相同。

與角度的模型綁定一起使用時，設計開關的正確方式是什麼？

Answer 1

.switch-notchecked { 
    background-color: #FE4A49; 
    color: yellow; 
} 

.switch-checked { 
    background-color: blue; 
    color: green; 
} 

在模板

<Switch #sw checked="false" (checkedChange)="switchChanged(sw.checked)" [class]="isChecked?'switch-checked':'switch-notchecked'"></Switch> 

在你的組件

isChecked:boolean; 

switchChanged(checked) { 
     this.isChecked = checked; 
    } 

Answer 2

即時造型的應用，這是我會怎麼做。

CSS：

Switch#userStatus[checked=true]{ 
    color:#ff0048 ; 
    background-color: white; 
    transform: scale(1.25, 1.25); // This is for change the size when checked 
    transform: translate(-5,0); // This is for stay the position after scale it 
} 

Switch#userStatus[checked=false]{ 
    color: gray; 
    background-color: gray; 
} 

這是我的XML：

`<Switch id="userStatus" checked="false" />` 

我希望這有助於！

Answer 3

我有一個問題與開關

背景色

，並預期它不工作。更改背景色正在改變整個開關（灰色部分）。所以我不得不改變只有顏色屬性：

Switch[checked=true] { 
    color: #f68533; 
}