我有一个简单的角度应用程序,可以使用下面的 JavaScript Web 音频对象来播放音频
应用程序组件.ts
export class AppComponent {
title = 'media player';
audio;
currentTime: number;
constructor() {
this.audio = new Audio();
this.audio.src = './Music/demo2.MP3';
this.audio.play();
this.currentTime = this.audio.currentTime;
}
}
和
应用程序组件.ts
<h4>{{ currentTime }}</h4>
一切正常,但视图不会随着模型的变化而更新
Angular 确实为相同的 Angular 使用更新了浏览器事件的绑定zonejs
哪只猴子修补了几个浏览器事件,然后它就触发了detectChanges
保持同步绑定的方法。
在这种情况下,Angular 不会更新绑定,因为Audio
API 事件不会通过 zonejs 进行猴子修补。对于这种情况,您必须手动运行更改检测以手动更新绑定。你可以使用ontimeupdate
的事件处理程序audio
API.
import { ChangeDetectorRef, Component } from '@angular/core';
export class AppComponent {
title = 'media player';
audio;
currentTime: number;
constructor(private cd: ChangeDetectorRef ) {
}
ngOnInit(){
this.audio = new Audio();
this.audio.src = './Music/demo2.MP3';
this.audio.play();
//this will make sure to update when time updates.
this.audio.ontimeupdate = (event) => {
this.currentTime = this.audio.currentTime;
this.cd.detectChanges();
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)