javascript - 在 Angular 中的 YouTube 播放器

我正在嘗試使用 Angular 4 實現一個 YouTube 播放器，但我只能使用 JavaScript 代碼來創建它。以下是代碼：

var tag = document.createElement('script');

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

      var player;
      setTimeout( 
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            height: '360',
            width: '640',
            videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      },3000);

在我希望播放器播放的頁面的 component.ts 中，我導入了以下程式碼：

import '../../apiyoutube.js';

問題是我想使用一些我想從資料庫恢復的事件等等，所以我想在服務和使用 TypeScript 的組件中操作這段程式碼的屬性。我該如何在隔離狀態下訪問這段程式碼的屬性？我已經試過放棄了，但是……我該如何使用 TypeScript 創建這個播放器？

備註：我加了一個 setTimeOut，因為這樣我在導入第一個角度時會執行 .js 代碼，然後再渲染 HTML，而代碼無法訪問 HTML 頁面中的 id