2017-04-17 4 views
1

In meinem Ionic 2 App zerstört wird, ich diese Funktion verwenden, um eine Video-Datei zum Herunterladen und seinen Download-Fortschritt verfolgen:Halt progressbar aktualisieren, wenn Ansicht

download() 
{ 
    this.progressbar=true; 
    this.downloadbutton=false; 
    this.fileTransfer.download('https://...videoURL....mp4', this.file.dataDirectory + 'path/to/downloads/test.mp4').then((entry) => { 
     console.log('download complete: ' + entry.toURL()); 
     this.progressbar=false; 
     this.startbutton=true; 
    }, (error) => { 
     console.log('error'); 
     console.log(error); 
    }); 

    this.fileTransfer.onProgress(progressEvent => { 
     if (progressEvent.lengthComputable) { 
      console.log("### Download percentage ###: "+Math.round((progressEvent.loaded/progressEvent.total)*100)); 
      this.setpercentage((progressEvent.loaded/progressEvent.total) * 100); 
     } else { 
     } 
    }); 

} 

Mit setpercentage, aktualisiere ich eine progressbar auf der Seite

setpercentage(perc) { 
     this.loadProgress = Math.round(perc); 
     this.ref.detectChanges(); 
    } 

Das alles funktioniert gut. Wenn der Benutzer weg navigiert (zurück), wird die Ansicht zerstört. Das Video wird weiterhin heruntergeladen (wie es sollte), aber wenn ich zurück zur Seite navigiere (während das Video noch heruntergeladen wird), wird die Fortschrittsleiste nicht aktualisiert: der Wert bleibt bei 0%.

Wie kann ich die Fortschrittsanzeige aktualisieren, auch wenn die Ansicht zerstört ist?

Grundsätzlich möchte ich diese page haben, um die gleiche Funktionalität wie eine tab zu haben. Wenn Benutzer zwischen verschiedenen Tabs navigieren, wird alles auf dem vorherigen Tab gespeichert.

Jede Hilfe wird sehr geschätzt!

Update:

Hier ist ein bisschen mehr Informationen, wie die App funktioniert:

Wenn ein Benutzer zum ersten Mal auf der Seite navigiert, gibt es eine Taste ist, die „Download Film“, sagt. Wenn der Benutzer darauf klickt, wird download() aufgerufen. this.progressbar=true; lässt die Fortschrittsanzeige erscheinen, während this.downloadbutton=false die Download-Schaltfläche verschwinden lässt. Sobald der Download beendet ist, verschwindet die Fortschrittsanzeige (this.progressbar=false;) und die Schaltfläche "Film abspielen" erscheint (this.startbutton=true;). Das Problem ist, dass, wenn der Benutzer auf den Download-Button klickt, und dann weg navigiert und auf diese Seite zurückkommt, scheint alles zurückgesetzt worden zu sein (obwohl der Film heruntergeladen hat) und der Download-Button wird wieder angezeigt.

Antwort

1

Wenn die Ansicht zerstört wird entweder es geht oder Abschluss der beobachtbaren

this.fileTransfer.download('https://...videoURL....mp4', 
    this.file.dataDirectory + 'path/to/downloads/test.mp4').then((entry) => { 
     console.log('download complete: ' + entry.toURL()); 
     this.progressbar=false; 
     this.startbutton=true; 
    }, (error) => { 
     this.progressbar=false; ////////////////////////////////// 
     console.log('error'); 
     console.log(error); 
    }); 

Der Zustand progressbar Fehler sollte bei allen möglichen Operationen geändert werden.

Auch wenn die Ansicht

zerstört

ngOnDestroy() Lifecycle-hook Implementieren der gleiche Fall

ngOnDestroy(){ 
     this.progressbar=false; //////// 
} 

Update 1 zu handhaben:

Die Syntax der Download-Methode ist als unten

fileTransfer.download(
    sourceURL, 
    targetURL, 
    successcallback, 
    errorCallBack, 
    trustAllHosts, 
    options) 

Quelle, Ziel, Successcallback, errorCallBack sind Pflichtparameter

Docs

Aktualisieren Sie die Methode auf der Basis der Syntax.

+0

Danke für Ihre Antwort. Wenn ich versuche, mit den vorgeschlagenen Anpassungen zu projektieren, bekomme ich einen Build-Fehler: 'Mitgelieferte Parameter stimmen mit keiner Signatur des Aufrufziels überein.' – binoculars

+0

bei welcher Zeile erhalten Sie diesen Fehler? – Aravind

+0

'this.fileTransfer.download ('https: //...videoURL....mp4',' – binoculars

Verwandte Themen