Skip to main content
1 de 3
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

Por desgracia no puedes usar HttpClient.get() para hacer el trabajo porque devuelve una promesa que emite un único valor como respuesta a la petición HTTP y se resuelve, nunca emite un nuevo valor o valores parciales.

La única alternativa es usar el evento progress de un XHR.

Al salirnos del marco de trabajo de Angular deberemos acceder al DOM del documento directamente ya que Angular no detectará los cambios en las variables de la clase en el evento de actualización del objeto XMLHttpRequest.

##Ejemplo:

Script PHP espera.php:

<?php
/* Permitimos el acceso desde cualquier origen (OJO) */
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET');
header('Allow: GET');
/* Si es la comprobación prevuelo finalizamos la ejecución */
($_SERVER['REQUEST_METHOD'] === 'OPTIONS') and die();

/* Finalizamos cualquier buffer que haya en el servidor web */
ob_end_flush();
/* Enviamos datos del total */
echo '15';
for ($t = 0; $t <= 15; $t++) {
        /* Enviamos la actualización del progreso actual */
        echo ';' . $t;
        /* Forzamos el envío de datos parcial al navegador */
        flush();
        /* Simulamos trabajo durante 1 segundo */
        sleep(1);
}

Ejemplo de app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  xhr: XMLHttpRequest;

  constructor() { }

  ngOnInit() {
    this.xhr = new XMLHttpRequest();
    this.xhr.addEventListener('progress', this.onProgress, false);
    this.xhr.open('GET', 'http://localhost/espera.php', true);
    this.xhr.send();
  }

  onProgress(evento) {
    /* Obtenemos la barra de progreso (no funciona la integración con Angular) */
    let progreso = document.getElementById('progreso') as HTMLProgressElement;
    /* Dividimos lo que entrega PHP (acumulativo) por puntos y comas */
    let valores: Array<String> = evento.srcElement.responseText.split(';');
    /* Cambiamos el valor de máximo (entero) por el primer elemento (total) */
    progreso.max = parseInt(valores[0] as string);
    if (valores.length > 1) {
      /* Si recibimos más de un valor cambiamos el valor actual (entero) */
      progreso.value = parseInt(valores[valores.length - 1] as string);
    }
  }

}

Ejemplo de app.component.html:

<progress id="progreso" value="0" max="0"></progress>
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64