如何从 3rd 方库访问角度组件答案

【问题标题】：How to access angular component from 3rd party library如何从 3rd 方库访问角度组件
【发布时间】：2019-05-02 18:00:47
【问题描述】：

我正在通过官方 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>

// ...

【问题讨论】：

您不能在订阅中拨打this.setCurrentTrack(response.track)吗？
@HariniP 不。它尝试调用事件订阅的 setCurrentTrack
你能在你的player.onload 配置上.bind(this) 吗？
这有点神秘。 DZ.init({player : {onload: this.onPlayerLoaded.bind(this)} }) 也是如此
@LostJon 是的，这行得通。非常感谢

标签： javascript angular typescript deezer

【解决方案1】：

为了帮助其他人，您应该 .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
        }
    });
}

【讨论】：