Question

在我的Ionic 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相同的功能。当用户在不同选项卡之间导航时，会记住上一个选项卡的所有内容。

非常感谢任何帮助！

更新

以下是应用程序的工作原理：

当用户首次导航到该页面时，会出现一个按钮，其中显示＆＃34;下载电影＆＃34;。当用户点击它时，会调用download()。 this.progressbar=true;会显示进度条，而this.downloadbutton=false会使下载按钮消失。下载完成后，进度条将消失（this.progressbar=false;）和＆＃34;播放电影＆＃34;按钮出现（this.startbutton=true;）。问题是当用户点击下载按钮，然后导航并返回此页面时，似乎所有内容都已重置（虽然电影确实下载了），下载按钮是再次显示。

Answer 1

当视图被销毁时，它会转到错误或完成您的可观察

 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)

source，target，successcallback，errorCallBack是必需参数

<强> Docs

根据语法更新方法。

在销毁视图时继续更新进度条

1 个答案: