即使在全局对象上定义，Angular2 上的 onYouTubeIframeAPIReady 也找不到名称“YT”

Question

为了捕捉用户暂停 youtube 视频 (that question posted here) 的时间，我发现自己在 Angular2 中使用了 onYouTubeIframeAPIReady 回调方法。

我遇到了与here 和here 所述类似的困难。

我听从了建议，最终使用了(window as any).onYouTubeIframeAPIReady = function () {}。

不过，在我的 onYouTubeIframeAPIReady 方法中，我有以下代码：

function onYouTubeIframeAPIReady() {
  player = new YT.Player('video', {
    events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
    }
  });
} 

我的 typescript linter 出现以下错误：

类型参数 '{events: {'onReady':(event:any) => void; 'onStateChange': (event:any)=>void;};}' 不能分配给'PlayerOptions'类型的参数

我的最小示例 repo 可以在这里找到：

git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout stackoverflow
npm install
ng serve

Answer 1

使用window['YT'] 而不是YT 似乎可以解决这个问题：

ngOnInit() {
  var player;

  window['onYouTubeIframeAPIReady'] = function() {
    player = new window['YT'].Player('video', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event){
    if (event.data == window['YT'].PlayerState.PAUSED) {
      console.log(player.getCurrentTime());
    }
  }

  function onPlayerReady(event) {
    document.getElementById("pause").addEventListener("click", function() {
      player.pauseVideo();
    });
    document.getElementById("play").addEventListener("click", function() {
      player.playVideo();
    });
  }

  if (!window['YT']){
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
}