gpt4 book ai didi

Typescript 类中的 Javascript 范围 "this"

转载 作者:行者123 更新时间:2023-12-03 08:29:34 25 4
gpt4 key购买 nike

我正在尝试在切换视频(播放/暂停)时更改视频的自定义图标。

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')
});

最佳答案

当调用事件监听器处理程序时,它不会在组件范围内调用。所以 this 不返回组件,而是返回控制元素。

你需要用this绑定(bind)你的监听器。

vdo.addEventListener('play', (function() {
this.updateVdoIcon(this);
}).bind(this));

参见文档 here .


您可以通过将其分离为函数调用 onClick 使其更清晰。

onClick() {
this.updateVdoIcon(this);
}

initialize() {
vdo.addEventListener('play', this.onClick.bind(this));
}

或者,您可以捕获 this 作为组件并传递给事件监听器。

let self = this;

vdo.addEventListener('play', function() {
self.updateVdoIcon(this);
});

关于Typescript 类中的 Javascript 范围 "this",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58687918/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com