如何在自定義 LoadingController 上應用 cssClass

Question

根據這個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 后，我看不到我的加載器，但我需要將這兩個類應用於我的自定義圖像加載器。

Answer 1

根據文檔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方法中。

Answer 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;
}