我正在尝试在切换视频(播放/暂停)时更改视频的自定义图标。
ngAfterViewInit() {
const vdoCont = document.querySelector('.video-player');
const vdo = vdoCont.querySelector('video');
vdo.addEventListener('play',() => {
console.log(this) // Here "this" refers to typescript class
this.updateVdoIcon(this);
});
vdo.addEventListener('pause',() => {
console.log(this) // Here "this" refers to typescript class
this.updateVdoIcon(this);
});
}
updateVdoIcon(videoElment: any) {
console.log(videoElment); // Expecting this to be video element instead of typescript class
}
我试图将箭头功能更改为JavaScript功能,但是在这里我无法使用我的“ updateVdoIcon”功能。
vdo.addEventListener('play',function() {
this.updateVdoIcon(this); // Property 'updateVdoIcon' does not exist on type 'HTMLVideoElement'
});
我知道我可以使用匿名函数(如下所示)并在那里更新图标,但是如果我想在函数中分离很多代码怎么办
vdo.addEventListener('play',function() {
this.paused ? console.log('Play icon') : console.log('Pause icon')
});