在離子按鈕上觸發模糊事件

Question

我試圖根據某些條件將焦點從離子按鈕上移開。 選擇按鈕后，我將使用CSS更改按鈕的顏色，並且希望有條件地刪除此“活動”狀態。

ion-button.ion-color-primary:active {
    --ion-color-base: #fff !important;
    --ion-color-contrast: var(--ion-color-primary) !important;
    border: 1px solid var(--ion-color-primary);
}

簡而言之，我追求的功能是這樣的：

如果用戶選擇了一個答案而答案不正確，則它應該不再具有焦點。

我已經嘗試了下面的代碼，該代碼基於另一篇文章，該文章顯示了如何使用輸入字段管理焦點，但是它似乎不起作用，並生成“不是函數”錯誤：

的HTML

 <ion-button (click)="checkTrue()" color="primary"id="next" #next>Next</ion-button> 

打字稿

@ViewChild('next') nextBtn: any;

checkTrue(){
   if(conition === true){
      this.nextBtn.blur();
   }
}

我還在文檔中注意到，按鈕上有一個名為“ ionBlur”的事件，因此您可以在按鈕上的模糊事件上設置動態對象。 我沒有找到觸發模糊事件的方法。

最后，我遇到了這篇類似的文章。 我嘗試應用它沒有任何運氣。 在甚至沒有添加任何建議的代碼之前，我注意到“ active”類已短暫添加到按鈕中。 但是實際上幾乎已將其刪除，但是按鈕的樣式仍顯示為具有焦點。

是否有人對如何從離子按鈕上取消“激活”狀態有任何建議？ 任何建議將不勝感激！

Answer 1

你可以做這樣的事情，

<ion-button (click)="checkTrue()" [ngClass]="{'conition' : active}" color="primary"id="next" #next>Next</ion-button> 

您只需要在HTML文件中執行此操作，而在checkTrue函數中的ts中，您只需要檢查條件變量的值並將其設置為true或false即可。