I'm currently working on a web application that incorporates the Deezer player through the official JS SDK. I've run into an issue where I am unable to access my Angular component from within the Deezer event subscription. The arrow function doesn't recognize the context of 'this', making it impossible for me to call my component's methods and pass values to them. How can I properly address this problem?
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) => {
// Here lies the challenge of passing response.track to setCurrentTrack()
});
}
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>
// ...