Обнаружение угловых изменений с помощью 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);
  }
}