Ionic 4: «Load Controller» dismiss () вызывается перед present (), который будет удерживать счетчик без отклонения

Question

Я использовал «Ionic Loading Controller», чтобы показать счетчик, пока данные не будут извлечены, затем он вызвал «dismiss ()», чтобы закрыть их.он работает нормально, но иногда, когда приложение уже имеет данные, dismiss () вызывается до выполнения create () и present (), что удерживает счетчик без отклонения ...

Я пытался вызвать данные внутри «loadingController.present (). Then ()», но это вызвало замедление данных ...

это ошибка?как решить эту проблему?

Пример моего кода:

customer: any;

constructor(public loadingController: LoadingController, private customerService: CustomerService)

ngOnInit() {
  this.presentLoading().then(a => consloe.log('presented'));
  this.customerService.getCustomer('1')
  .subscribe(customer => {
    this.customer = customer;
    this.loadingController.dismiss().then(a => console.log('dismissed'));
  }
}

async presentLoading() {
  const loading = await this.loadingController.create({
    message: 'wait. . .',
    duration: 5000
  });
  return await loading.present();
}

Answer 1

та же проблема здесь, и здесь мое решение (ионное 4 и угловое 7):

Начинается с ацетированного раствора.

подарок создает загрузку один раз. В функции dismiss я устанавливаю isShowing на false, только если dimiss возвращает true

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  isDismissing: boolean;
  isShowing: boolean;

  constructor(public loadingController: LoadingController) { 

  }

  async present() {
    if(this.isShowing){
      return
    }

    this.isShowing = true

    await this.loadingController.create({spinner: "dots"}).then(re => {
      re.present()
      console.log("LoadingService presented", re.id)
    })
  }

  async dismiss() {
    if(this.isShowing){
      await this.loadingController.dismiss().then(res => {
        if(res){
          this.isShowing = false
          console.log("LoadingService dismissed", res);
        }
      })
    }
  }
}

Answer 2

У меня была такая же проблема, по-видимому, я понял это, сначала идентифицировав проблему.Эта проблема возникает, когда срок действия этого загрузчика истек, поэтому он в основном был уволен без нашего полного контроля ..

Теперь, он будет работать нормально, пока вы не используете dismiss() ВРУЧНУЮ.

Поэтому, если вы собираетесь использовать dismiss() вручную с продолжительностью, удалите продолжительность при создании.затем используйте setTimeout() возможно

// create loader
this.loader = this.loadingCtrl.create()

// show loader
this.loader.present().then(() => {})

// add duration here
this.loaderTimeout = setTimeout(() => {
    this.hideLoader()
}, 10000)

, затем создайте свой загрузчик скрытия здесь

// prepare to hide loader manually
hideLoader() {
   if (this.loader != null) {
      this.loader.dismiss();
      this.loader = null
    }

    // cancel any timeout of the current loader
    if (this.loaderTimeout) {
      clearTimeout(this.loaderTimeout)
      this.loaderTimeout = null
    }
}

Answer 3

Это событие onDidDismiss () должно создаваться после вызова функции .present ().

Пример:

this.loader.present().then(() => {
            this.loader.onDidDismiss(() => {
                console.log('Dismiss');
            })
        });

Answer 4

Хотя принятое решение может работать ... Я думаю, лучше всегда иметь 1 загрузку.Мое решение отклоняет предыдущую загрузку, если она существует, и создает новую.Я обычно хочу отображать только 1 загрузку за раз (мой конкретный вариант использования), поэтому это решение работает для меня.

Принятое решение ставит проблему возможных осиротевших нагрузок.Но это хорошая отправная точка ?.

Следовательно, это мой предлагаемый инъекционный сервис (вы можете перезарядить его с помощью дополнительных ионных настроек, если вам это нужно. Они мне не нужны, поэтому я не добавил больше вприсутствует функция, но они могут быть добавлены соответственно):

import {Injectable} from '@angular/core';
import {LoadingController} from '@ionic/angular';

@Injectable({
    providedIn: 'root'
})
export class LoadingService {

    currentLoading = null;

    constructor(public loadingController: LoadingController) {
    }

    async present(message: string = null, duration: number = null) {

        // Dismiss previously created loading
        if (this.currentLoading != null) {
            this.currentLoading.dismiss();
        }

        this.currentLoading = await this.loadingController.create({
            duration: duration,
            message: message
        });

        return await this.currentLoading.present();
    }

    async dismiss() {
        if (this.currentLoading != null) {

            await this.loadingController.dismiss();
            this.currentLoading = null;
        }
        return;
    }

}

Answer 5

Простой способ - добавить функцию setTimeOut:

setTimeout(() => {
      this.loading.dismiss();
    }, 2000);

Answer 6

Я столкнулся с той же проблемой, может быть, у меня есть более простое и надежное решение с использованием самих ионных событий.Это сработало для меня.Он будет ждать, пока загрузчик не будет создан, и только тогда будет выполнен сервисный вызов, и только после завершения сервисного вызова только тогда загрузчик будет отклонен.Я надеюсь, что это помогает ..

yourFuncWithLoaderAndServiceCall(){
     this.presentLoading().then(()=>{
         this.xyzService.getData(this.ipObj).subscribe(
           res => {
            this.dismissLoading();
        this.dismissLoading().then(() => {
        this.responseObj = res;
                   })
                  }
                 });
                }

async presentLoading() {
    this.loader = await this.loadingController.create({
      translucent: true
    });
    await this.loader.present();
  }

  async dismissLoading() {
    await this.loader.dismiss();
  }

Answer 7

для Ионная 4 проверьте это решение

Источник Ссылка

  import { Component } from '@angular/core';
  import { LoadingController } from '@ionic/angular';

  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage {

    loaderToShow: any;

    constructor(
      public loadingController: LoadingController
    ) {
    }


    showAutoHideLoader() {
      this.loadingController.create({
        message: 'This Loader Will Auto Hide in 2 Seconds',
        duration: 20000
      }).then((res) => {
        res.present();

        res.onDidDismiss().then((dis) => {
          console.log('Loading dismissed! after 2 Seconds');
        });
      });
    }

    showLoader() {
      this.loaderToShow = this.loadingController.create({
        message: 'This Loader will Not AutoHide'
      }).then((res) => {
        res.present();

        res.onDidDismiss().then((dis) => {
          console.log('Loading dismissed! after 2 Seconds');
        });
      });
      this.hideLoader();
    }

    hideLoader() {
      setTimeout(() => {
        this.loadingController.dismiss();
      }, 4000);
    }

  }

Answer 8

Я использую аналогичное решение, но полагаюсь на идентификаторы загрузочных оверлеев и позволяю Ionic Loading Controller управлять тем, какой оверлей должен быть сверху.

LoadingService

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  constructor(public loadingController: LoadingController) { }

  async present(loadingId: string, loadingMessage: string) {
    const loading = await this.loadingController.create({
      id: loadingId,
      message: loadingMessage
    });
    return await loading.present();
  }

  async dismiss(loadingId: string) {
    return await this.loadingController.dismiss(null, null, loadingId);
  }
}

Компоненты/ Услуги с использованием службы загрузки

import { LoadingService } from '../loading/loading.service';

@Injectable({
  providedIn: 'root'
})
export class MessagesService {

  ...

  constructor(
    protected http: HttpClient,
    protected loading: LoadingService
  ) { }

  ...

  protected async loadMessagesOverview() {
    const operationUrl = '/v1/messages/overview';

    await this.loading.present('messagesService.loadMessagesOverview', 'Loading messages...');

    this.http.get(environment.apiUrl + operationUrl)
      .subscribe((data: Result) => {
        ...
        this.loading.dismiss('messagesService.loadMessagesOverview');
      }, error => {
        ...
        this.loading.dismiss('messagesService.loadMessagesOverview');
        console.log('Error getting messages', error);
      });
  }

}

Answer 9

В качестве альтернативы, вы должны изменить код для загрузки звонка, как показано ниже

async ngOnInit() {
  const loading = await this.loadingController.create();
  await loading.present();
  this.customerService.getCustomer('1')
  .subscribe(customer => {
    this.customer = customer;
    loading.dismiss();
  }
}

Answer 10

Вот как я решил свою проблему.

Я использовал булеву переменную isLoading, чтобы изменить на false при вызове dismiss ().после завершения present (), если "isLoading" === false (означает, что dismiss () уже вызван), то он будет немедленно отклонен.

также я написал код в службе, поэтому мне не нужнонапишите это снова на каждой странице.

loading.service.ts

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  isLoading = false;

  constructor(public loadingController: LoadingController) { }

  async present() {
    this.isLoading = true;
    return await this.loadingController.create({
      duration: 5000,
    }).then(a => {
      a.present().then(() => {
        console.log('presented');
        if (!this.isLoading) {
          a.dismiss().then(() => console.log('abort presenting'));
        }
      });
    });
  }

  async dismiss() {
    this.isLoading = false;
    return await this.loadingController.dismiss().then(() => console.log('dismissed'));
  }
}

, затем просто вызовите present () и dismiss () со страницы.

пример ввопрос:

customer: any;

constructor(public loading: LoadingService, private customerService: CustomerService)

ngOnInit() {
  this.loading.present();
  this.customerService.getCustomer('1')
  .subscribe(
    customer => {
      this.customer = customer;
      this.loading.dismiss();
    },
    error => {
      console.log(error);
      this.loading.dismiss();
    }
  );

примечание: не забудьте добавить «LoadingService» провайдерам AppModule