使用HTMLAudioElement进行角度变化检测 [英] Angular change detection with HTMLAudioElement

问题描述

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

I'm trying to build a small audio player but can't seem to get nice change detection, for example for the audio track current time. For example, I have the track playing fine in my component and in my template file I have

{{ player.currentTime }}

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

But the time only seems to be updated when I perform other events such as clicking around or play/pause button for example. It doesn't intuitively update live as the track is playing. Seems like issue with change detection or something?

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

For working example, see ngx-admin-demo (https://akveo.com/ngx-admin/#/pages/iot-dashboard) and scroll down slightly to see the player. If you press play and stop moving mouse you will see what I mean, it doesn't update progress bar or time unless you are performing action.

推荐答案

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

Try something like this in your component to encourage change detection every second without the user having to perform some event to spur a change detection (Angular2+ only performs change detection on XHR requests, events and 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进行角度变化检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！