javascript - mengakses data kelas pada fungsi window typescript

Saya sedang membangun sebuah aplikasi dengan Angular 2 dan saya juga menggunakan YouTube IFrame API.

API Youtube mengharuskan saya untuk mendeklarasikan beberapa fungsi ke objek global, jadi ini kode saya:

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');
  }

}

Ini bekerja dengan baik, lalu, di luar kelas saya memiliki ini:

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
}

Saya ingin memanipulasi beberapa data yang berasal dari MyClass (yang mengambilnya dari database) di dalam fungsi-fungsi ini, tetapi ketika saya mencoba mengaksesnya dengan "this.data" dikatakan bahwa itu tidak terdefinisi. Bagaimana saya bisa melakukannya?

Jawaban #1

Tidak yakin tentang menggunakan Angular 2, tetapi saya pikir itu perlu menjadi "event.data".

Jawaban #2

Saya menemukan jawaban dengan sedikit bantuan dari versi Portugis StackOverflow. Yang harus saya lakukan adalah mendeklarasikan variabel di luar kelas, sama seperti fungsi-fungsi tersebut. Jadi begini:

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);        
}

Itu adalah hal yang sederhana dan saya berpikir terlalu rumit. Saya harap ini membantu orang lain.