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