gpt4 book ai didi

javascript - 如何从 3rd 方库访问 Angular 组件

转载 作者:行者123 更新时间:2023-11-30 14:03:04 26 4
gpt4 key购买 nike

我正在构建通过官方 JS SDK 使用 Deezer 播放器的网络应用程序。我遇到的问题是我无法从 Deezer 事件订阅访问我的 Angular 组件。箭头函数不理解 this 的上下文,因此我无法调用组件的方法并将值传递给它们。实现该目标的正确方法是什么?

app.component.ts

// ...

declare var DZ;

// ...

export class AppComponent implements OnInit {
currentTrack: any = null;

constructor() {}

ngOnInit(): void {
DZ.init({
appId : '8',
channelUrl : 'https://developers.deezer.com/examples/channel.php',
player : {
onload : this.onPlayerLoaded
}
});
}

onPlayerLoaded() {
DZ.player.playAlbum(302127);

DZ.Event.subscribe('player_position', console.log);
DZ.Event.subscribe('current_track', (response) => {
// I would like to pass response.track to setCurrentTrack() there
});
}

setCurrentTrack(track) {
this.currentTrack = track;
}
}

index.html

// ...

<head>
<script type="text/javascript" src="https://e-cdns-files.dzcdn.net/js/min/dz.js"></script>
</head>

// ...

最佳答案

为了帮助其他人,您应该 .bind(this) 到您的函数调用,因为 this 可能指的是 DZ 上下文,而不是您的类:

ngOnInit(): void {
DZ.init({
appId : '8',
channelUrl : 'https://developers.deezer.com/examples/channel.php',
player : {
onload : this.onPlayerLoaded.bind(this) //Fix right here
}
});
}

关于javascript - 如何从 3rd 方库访问 Angular 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55957890/

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