如何在自定义 LoadingController 上应用 cssClass答案

【问题标题】：how to apply cssClass on custom LoadingController如何在自定义 LoadingController 上应用 cssClass
【发布时间】：2020-03-15 02:34:08
【问题描述】：

根据这个http://ionicframework.com/docs/v2/api/components/loading/LoadingController/我可以将cssClass应用到loadingCtrl。

这是我的功能

presentLoadingCustom() {
    this.loading = this.loadingCtrl.create({
      spinner: 'hide',
      content: `
        <img src="assets/images/loader/loading.gif" class="img-align" />
        `,
      cssClass:`
      //below class in inbuilt class 
       .loading-wrapper{
        background:none;
        box-shadow: none;
      }
      .img-align{
        height:80px;
      }`
    });
    this.loading.present();
  }

我在应用 cssClass 后无法看到我的加载器，但我需要将这两个类应用到我的自定义图像加载器。

【问题讨论】：

标签： angular sass ionic2 loading

【解决方案1】：

根据 documentation cssClass 选项接受 classes for custom styles, separated by spaces 只是不是您将 css 传递给它的方式。所以改变你的presentLoadingCustom函数如下：

presentLoadingCustom() {
  this.loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: `<img src="assets/images/loader/loading.gif" class="img-align" />`,
    cssClass:`loading-wrapper img-align`
  });

  this.loading.present();
}

您必须将您的 loading-wrapper 和 img-align 类样式定义添加到您的 css 文件中，而不是在 LoadingController 的 create 方法中。

【讨论】：

loading-wrapper 和 img-align 类我现在要写的地方
在应用程序的样式表文件中
我正在使用提供程序，所以我在提供程序中没有@component，所以我可以在哪里放置这个 css 类
您可以创建新的 css 文件并使用正确的路径将其包含在您的 HTML 中，或者您可以在您的主要组件（比如说 AppComponent）css 中添加这两个类并尝试检查它是否工作。

【解决方案2】：

我遇到了同样的问题...但是为 loadingController 设置这个 CSS 的正确方法是通过下面的示例

async presentLoadingWithOptions() {
    const loading = await this.loadingController.create({

      duration: 55000,
      message: '<div><img src="../assets/imgs/plane_loading.gif" class="img-align"  /> <br />...Please wait</div>',
      spinner: null, 
      translucent: true,

      cssClass:'custom-loader-class',
      backdropDismiss: true
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();
    console.log('Loading dismissed with role:', role);
  }

比你需要去 global.css 并添加以下示例

.custom-loader-class{
    --background:#F4B004;
    --spinner-color:#F94701;
}

【讨论】：