Question

我在插件回调中遇到了一个奇怪的错误。我将离子与Zip插件一起使用。我想显示解压缩进度。但是，当脚本在变量中设置新值时，回调函数不需要调用呈现。我尝试了公共变量，静态变量，静态函数，广播事件，但是渲染没有发生。我的代码：

import { Component } from '@angular/core';
import { NavController, Platform} from 'ionic-angular';

import { File } from '@ionic-native/file';
import { Zip } from '@ionic-native/zip';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public platform: Platform, public singleton:SingletonService, private file: File, private zip: Zip) {

    var isUnzipMap = localStorage.getItem("mapUnzip");
    platform.ready().then((readySource) => {
            HomePage.setPercent(18); //
            
            this.zip.unzip(this.file.applicationDirectory +'www/assets/map.zip', this.file.externalDataDirectory, (progress) => {
            HomePage.setPercent(Math.round((progress.loaded / progress.total) * 100));})
            .then((result) => {
                if(result === 0) {
                    localStorage.setItem("mapUnzip","true");
                }
                else {
                    localStorage.setItem("mapUnzip","false");
                };
            });
        }
      
    });
  }
  
  public static setPercent(i) {
    HomePage.progressbarPercent = i + '%';
  }

  get progressbarPercent() {
    return HomePage.progressbarPercent;
  }
}

<ion-content class="menuBg" scrollbar-x="false" scrollbar-y="false">
    <div class="topWindow">
        <div class="topMessageBlock">
            <div id="message" class="message">Text</div>
            <div id="progressbar" class="progressbar">
                <div id="progressbarPosition" class="progressbarPosition" [style.width]="progressbarPercent"></div>
            </div>
        </div>
    </div>
</ion-content>

函数setPercent在变量中设置新值。如果添加console.log-传递的变量的值更改。

我为我找到了两个工作选择： 1）使用document.getElementById（“ progressbarPosition”）。style.width = newValue。 2）为页面中的任何元素添加setInterval。调用setInterval时会发生自动渲染，并且我的变量会使用正确的进度条位置进行更新。

我相信我的解决方案是拐杖，您可以找到更合理的解决方案。也许有人知道如何解决这个问题？谢谢！

Answer 1

我仍然不理解图形无法正常工作的原因，但是我通过角度找到了解决方案。我使用了ChangeDetectorRef：

import { Component, ChangeDetectorRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

import { File } from '@ionic-native/file';
import { Zip } from '@ionic-native/zip';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    constructor(public navCtrl: NavController, public platform: Platform, public singleton: SingletonService, private file: File, private zip: Zip, private cdr: ChangeDetectorRef) {

        var isUnzipMap = localStorage.getItem("mapUnzip");
        platform.ready().then((readySource) => {
            HomePage.setPercent(18); //

            this.zip.unzip(this.file.applicationDirectory + 'www/assets/map.zip', this.file.externalDataDirectory, (progress) => {
                HomePage.setPercent(Math.round((progress.loaded / progress.total) * 100));
                this.cdr.detectChanges();
            })
                .then((result) => {
                    if (result === 0) {
                        localStorage.setItem("mapUnzip", "true");
                    }
                    else {
                        localStorage.setItem("mapUnzip", "false");
                    };
                });
        });
    }

    public static setPercent(i) {
        HomePage.progressbarPercent = i + '%';
    }

    get progressbarPercent() {
        return HomePage.progressbarPercent;
    }
}

角度自动渲染未从插件回调中调用

1 个答案: