使用HTMLAudioElement进行角度变化检测

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);
  }
}