时间戳

首页 > 解决方案 > 离子吐司 scss 类 - Angular - android

android - 离子吐司 scss 类 - Angular - android

问题描述

我正在使用 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 文件有问题。

请问有人有解决方案吗？

标签： androidangularsasstoastionic5

解决方案

constructor(public toastCtrl:ToastController) {}

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

推荐阅读