在我的离子2应用中,我使用此功能下载视频文件并跟踪其下载进度:
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 {
}
});
}
使用setpercentage
,我在页面上更新了进度栏
setpercentage(perc) {
this.loadProgress = Math.round(perc);
this.ref.detectChanges();
}
这一切都很好。当用户逐渐消失时,视图被破坏。该视频不断下载(应该是应该的(,但是当我导航返回页面(视频仍在下载时(时,进度键没有更新:该值停留在0%。
即使视图被破坏了,我该如何保持进度栏的更新?
基本上,我想让此page
具有与tab
相同的功能。当用户在不同的选项卡之间导航时,请记住上一个选项卡的所有内容。
任何帮助都非常感谢!
更新:
以下是该应用程序工作原理的更多信息:
当用户首先导航到页面时,有一个按钮显示"下载电影"。当用户单击它时,调用download()
。this.progressbar=true;
使进度键出现,而this.downloadbutton=false
使下载按钮消失了。下载完成后,出现了ProgressBar消失(this.progressbar=false;
(,并且出现" Play Movie"按钮(this.startbutton=true;
(。问题是,当用户单击下载按钮,然后导航并返回此页面时,似乎所有内容都已重置(尽管电影确实下载(,并且下载按钮为再次显示。
当视图被破坏时,它要么会出现错误或可观察的
完成 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);
});
应在所有可能的操作下更改进度键的状态。
另外,当视图被破坏时
实现ngOnDestroy()
生命周期挂钩处理同一情况
ngOnDestroy(){
this.progressbar=false; ////////
}
更新1:
下载方法的语法如下
fileTransfer.download(
sourceURL,
targetURL,
successcallback,
errorCallBack,
trustAllHosts,
options)
源,目标,成功的回背,错误拨动是强制性参数
docs
根据语法更新该方法。