更改文本和颜色离子按钮答案

【问题标题】：Change text and color ionic button更改文本和颜色离子按钮
【发布时间】：2021-01-06 21:44:26
【问题描述】：

我有离子按钮

  <ion-button expand="block" share="round" (click)="connectOrdisconnect()" [disabled]="(loading$ | async)"> 
    <ion-label > <ion-spinner *ngIf="loading$ | async"></ion-spinner> connectOrdisconnect</ion-label>
  </ion-button>


  ngOnInit() {
    this.loading$=this.printService.printerConnecting;  
    this.loading$.subscribe(es => {
       
      //how to change the color and text of ion-button 

      // setTimeout need to run without troubles with ng changes detector
      setTimeout(_=>{this.changeDetectorRef.detectChanges()},0);    
    });
  }

我正在使用 ionic 5 形式..我需要根据加载 $ 可观察值更改更改文本和颜色（蓝色/红色）..请告诉我

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

您可以添加自定义颜色，就像我在代码示例中添加金色一样，您可以在项目中添加自己的颜色并使用它

variable.scss

--ion-color-gold: #ffd700;
--ion-color-gold-rgb: 255, 215, 0;
--ion-color-gold-contrast: #000000;
--ion-color-gold-contrast-rgb: 0, 0, 0;
--ion-color-gold-shade: #e0bd00;
--ion-color-gold-tint: #ffdb1a;

global.scss

.ion-color-gold {
    --ion-color-base: var(--ion-color-gold) !important;
    --ion-color-base-rgb: var(--ion-color-gold-rgb) !important;
    --ion-color-contrast: var(--ion-color-gold-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-gold-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-gold-shade) !important;
    --ion-color-tint: var(--ion-color-gold-tint) !important;
}

在你的 ts 文件中定义如下变量

public buttonCustomColor : string = 'primary';
public buttonCustomText : string = 'Connect';

constructor() { 
    setTimeout(()=>{
      this.buttonCustomColor  = 'gold';
      this.buttonCustomText = 'Disconnect';
    },5000)
}

在你的 html 中使用这个 buttonCustomColor 变量，如下所述

<ion-button [color]="buttonCustomColor" expand="block" share="round" (click)="connectOrdisconnect()" [disabled]="(loading$ | async)"> 
    <ion-label > <ion-spinner *ngIf="loading$ | async"></ion-spinner> {{buttonCustomText}}</ion-label>
</ion-button>

【讨论】：