javascript - pristupanje podacima klase na window funkciji typescript

Izrađujem aplikaciju s Angular 2 i također koristim YouTube IFrame API.

YouTube API zahtijeva da neke funkcije deklariram u globalnom objektu, pa je ovo moj kod:

export class MyClass {

  someData: any;

  constructor( ... ) {
    ...
  }

  loadAPI(){
    (window as any).onYouTubeIframeAPIReady = function () {
      buildPlayer();
    }

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    console.log('API loaded');
  }

}

Radi dobro, onda, izvan klase imam ovo:

function buildPlayer(){
  player = new YT.Player('player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
  console.log('youtube iframe api ready!');
}

function onPlayerReady(event){
  // HERE IS MY PROBLEM
  // I want to manipulate "someData" in these functions
}

function onPlayerStateChange(status){
  // HERE IS MY PROBLEM
}

Želim manipulirati nekim podacima koji dolaze iz MyClass (koja ih dohvaća iz baze podataka) unutar ovih funkcija, ali kada pokušam pristupiti njima s "this.data" kaže da je neodređeno. Kako to mogu napraviti?

Odgovor #1

Nisam siguran u korištenje Angular 2, ali mislio bih da treba biti "event.data".

Odgovor #2

Pronašao sam odgovor uz malu pomoć portugalske verzije StackOverflowa. Ono što sam trebao učiniti je deklarirati varijablu izvan klase, baš kao i funkcije. Dakle, izgleda ovako:

let someData: any;

export class MyClass {    

    someData: any; // after manipulate the data in here, I can just
                   // set it like this: someData = this.someData;  

    constructor() {

    }

    loadAPI(){
    (window as any).onYouTubeIframeAPIReady = function () {
      buildPlayer();
    }

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    console.log('API loaded');
    }
} 

function buildPlayer(){
  player = new YT.Player('player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
  console.log('youtube iframe api ready!');
}

function onPlayerReady(event){
    // I can manipulate it here
    console.log(someData);   
}

function onPlayerStateChange(status){
    // I can manipulate it here
    console.log(someData);        
}

Bila je to jednostavna stvar, a ja sam razmišljao prekomplicirano. Nadam se da će ovo pomoći nekome drugome.