离子吐司 scss 类 - Angular - android

Question

我正在使用 Ionic 5、Angular 和 cordova。我有一个具有全局 toast 方法的服务提供商，代码如下：

 GlobalToast(text: string) {
    // creating a toast for global use throughout the app
    this.toast = this.toastController.create({
      message: text,
      cssClass: 'my-toast-class',
      animated: true,
      duration: 370}).then((toastData) => {
        toastData.present();
      });
  }

我在不同的组件中调用 toast，如下所示：

this.newFavAppService.GlobalToast(this.translate.instant('Favourites.Added'));
this.newFavAppService.GlobalToast(this.translate.instant('Favourites.Removed'));

我的scss是在global.scss文件中设置的，代码如下：

.md{ 
    .my-toast-class{
        --background: #000534 !important;
        --color: white !important;
        --width: max-content !important;
        --height: 45px !important;
        --border-radius: 200px !important;
        position: sticky !important;
        margin-bottom:12% !important;
        text-align: center !important;
        opacity: 87% !important;
        top: 100% !important;
    }
}
.ios{ 
    .my-toast-class{
        --background: #000534;
        --color: white;
        --width: max-content;
        --height: 45px;
        --border-radius: 200px;
        position: sticky;
        margin-bottom:10%;
        text-align: center;
        opacity: 0.83;
        top: 100%;
    }
}

toast 适用于 ios（发布版和调试版），仅适用于 android 调试版。一旦我构建了在 android 上发布的应用程序，吐司就不再出现了。我是否还可以补充一点，如果我删除 global.scss 类中的代码，则 toast 可以与开头给出的基本 scss 一起使用。我认为这表明当我构建以在 android 中发布时 global.scss 文件有问题。

请问有人有解决办法吗？

Answer 1

我不确定这是否是正确的做法，但我所做的是：

@media screen {
  ion-toast.toast-custom-class {
    --border-radius: 30px !important;
    --text-align: center !important;
    --background-color: #676767 !important;
    text-align: center;
  }
}

在我的 global.scss 文件的底部。到目前为止，它适用于我在 Android 和网络上，不确定 IOS。

Answer 2

constructor(public toastCtrl:ToastController) {}

async openToast() {  
  const toast = await this.toastCtrl.create({  
    message: 'LeaveType was Selected Successfully',
    // position: 'middle',  
    duration: 3000  
  });  
  toast.present();  
}