Búsqueda de sitios web

angular - Ionic 2 - El controlador de carga no funciona


Estoy intentando usar el LoadingController recién agregado de esta manera:

let loading=this.load.create({
  content: "Connexion au serveur Migal en cours..."
});

loading.present();

this.http.get(this.urlCheckerForm.value.migalUrl+'/action/MobileApp/URLChecker')
  .map(res => res.json())
  .subscribe(
    data => this.newConnection(data,loading),
    error => this.catchURLError(loading));

loading.dismiss();

Básicamente, solo quiero mostrar mi ventana emergente de carga antes de que mi página se cargue y cerrarla después.

Seguí el ejemplo en la documentación de Ionic 2, pero no parece funcionar en absoluto...

EDITAR : El componente de carga ni siquiera aparece.

Respuesta #1

El problema con tu código es que estás haciendo la solicitud http y luego llamando a dismiss(), pero el método dismiss() no espera a que la solicitud http termine. Por favor, echa un vistazo a este plunker.

El código es bastante autoexplicativo:

import { NavController, LoadingController } from 'ionic-angular/index';
import { Http, Response } from '@angular/http';
import { Component } from "@angular/core";
import 'rxjs/Rx';

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  private users : Array<any>

  constructor(private http: Http, private loadingCtrl: LoadingController) {

    // Create the popup
    let loadingPopup = this.loadingCtrl.create({
      content: 'Loading data...'
    });

    // Show the popup
    loadingPopup.present();

    // Get the data
    this.http.get('https://jsonplaceholder.typicode.com/users')
      .map((res: Response) => res.json())
      .subscribe(
        data => {

          // I've added this timeout just to show the loading popup more time
          setTimeout(() => {
            this.users= data;
            loadingPopup.dismiss();
          }, 1000);

          // Should be just this:
          // this.users= data;
          // loadingPopup.dismiss();
        },
        err => console.error(err)
    );

  }
}

Artículos relacionados