Question

我正在尝试构建一个小型音频播放器，但似乎无法获得很好的更改检测，例如当前时间的音轨。例如，我的组件和模板文件中的曲目都能正常播放

{{ player.currentTime }}

但是，当我执行其他事件（例如单击四处或播放/暂停按钮）时，时间似乎只会更新。在播放曲目时，它不会直观地实时更新。好像是变更检测之类的问题？

有关工作示例，请参见ngx-admin-demo（https://akveo.com/ngx-admin/#/pages/iot-dashboard）并向下滚动以查看播放器。如果您按下播放键并停止移动鼠标，您将明白我的意思，除非您执行操作，否则它不会更新进度条或时间。

Answer 1

尝试在组件中执行类似的操作，以鼓励每秒进行更改检测，而无需用户执行某些事件来刺激更改检测（Angular2 +仅对XHR请求，事件和setTimeout / setInterval执行更改检测）：

@Component({
  selector: 'my-player',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: '/path/to/my-player.template.html'
})
class MyPlayer {
  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.ref.markForCheck();
    }, 1000);
  }
}

使用HTMLAudioElement进行角度变化检测

1 个答案: