Ionic2/Cordova中Video Editor插件进度事件无法更新DOM UI求助

我之前也碰到过完全一样的情况！问题的核心在于：Cordova插件的回调函数是运行在Angular变更检测机制之外的——虽然控制台能正常打印进度值，但Angular完全感知不到这个变量的变化，自然不会去更新DOM内容。

下面给你两种实用的解决方案，选一个适配你的代码就行：

方案一：用NgZone把回调纳入Angular上下文 #

这是最推荐的方式，能让整个回调逻辑都处于Angular的变更检测范围内：

1. 先在组件里导入并注入NgZone：

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

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent {
  public totalCompressed = 0; // 确保变量是公共可访问的

  constructor(private ngZone: NgZone) { }
}

2. 修改transcodeVideo的progress回调，把更新变量的代码放到ngZone.run()包裹的函数里：

this.videoEditor.transcodeVideo({
  fileUri: correctUrl,
  outputFileName: `output${Date.now()}.mp4`,
  outputFileType: VideoEditorOptions.OutputFileType.MPEG4,
  progress: (info: number) => {
    console.log(info);
    // 用ngZone.run把变量更新逻辑纳入Angular上下文
    this.ngZone.run(() => {
      this.totalCompressed = Math.ceil(info * 100);
      console.log(this.totalCompressed);
    });
  }
})

方案二：手动触发变更检测 #

如果不想引入NgZone，也可以用ChangeDetectorRef手动通知Angular更新DOM：

1. 导入并注入ChangeDetectorRef：

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  public totalCompressed = 0;

  constructor(private cdRef: ChangeDetectorRef) { }
}

2. 在更新变量后手动调用变更检测方法：

this.videoEditor.transcodeVideo({
  fileUri: correctUrl,
  outputFileName: `output${Date.now()}.mp4`,
  outputFileType: VideoEditorOptions.OutputFileType.MPEG4,
  progress: (info: number) => {
    console.log(info);
    this.totalCompressed = Math.ceil(info * 100);
    console.log(this.totalCompressed);
    // 手动触发变更检测，让Angular更新DOM
    this.cdRef.detectChanges();
  }
})

额外小提醒 #

一定要确保totalCompressed是组件的公共成员（用public修饰），这样模板才能正常读取到这个变量的值。

内容的提问来源于stack exchange，提问作者raju