Как получить доступ к угловому компоненту из сторонней библиотеки - PullRequest
Новая
       31

Как получить доступ к угловому компоненту из сторонней библиотеки

1 голос
/ 02 мая 2019

Я создаю веб-приложение, которое использует плеер Deezer от официального JS SDK.Проблема, с которой я столкнулся, заключается в том, что я не могу получить доступ к своему компоненту Angular из подписки на события Deezer.Функция стрелки не понимает контекст 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>

// ...

1 Ответ

2 голосов
/ 02 мая 2019

Чтобы помочь другим людям, вы должны .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
        }
    });
}
...