Как исправить 'TypeError: youTubeIframeAPIReady не является функцией' в Angular Elements для нескольких игроков на странице

Question

На моей странице index.html есть несколько пользовательских угловых элементов с именем <my-video>, каждый из которых загружает видеопроигрыватель через API Iframe YouTube. У меня есть один обратный вызов, определенный для обратного вызова onYouTubeIframeAPIReady, который запускается на объекте окна при загрузке скрипта API. Обратный вызов настраивает проигрыватель видео. Чтобы настроить несколько игроков, я вызываю обратный вызов окна ['onYouTubeIframeAPIReady'] вручную внутри обратного вызова (он вызывает сам себя). Результат: каждый игрок отлично загружается и работает как положено. После создания финального проигрывателя я получаю сообщение об ошибке: «Uncaught TypeError: youTubeIframeAPIReady не является функцией». На всю жизнь я не могу понять, как разрешить консоль TypeError. Пожалуйста, помогите.

Это видеокомпонент в библиотеке компонентов, использующий пользовательские элементы Angular вместо полноценного приложения.

Index.html

<my-video some-property="some value"></my-video>
<my-video some-property="some value"></my-video>

Video.component.ts

import { Component, OnInit} from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {
  videoYoutubeId = 'WWXfdIK1WxA';
  private player: any;
  private YT: any;

  constructor() {}

  ngOnInit() {
    this.loadYoutubeScript();
    this.createVideoPlayer();
  }

  loadYoutubeScript() {
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  createVideoPlayer() {
    const youTubeIframeAPIReady = window['onYouTubeIframeAPIReady'];

    window['onYouTubeIframeAPIReady'] = () => {

      this.YT = window['YT'];
      const iframeId = this.videoYoutubeId.toLowerCase();
      this.player = new window['YT'].Player(iframeId, {
        events: {
          'onReady': this.onPlayerReady.bind(this)
        }
      });

      youTubeIframeAPIReady(); // <==== Uncaught TypeError: youTubeIframeAPIReady is not a function
    };
  }

}

Video.component.html

<iframe
   [id]="videoYoutubeId | lowercase"
   width="640"
   height="360"
   style="width: 100%; height: 100%; padding: 0; margin: 0;"
   frameborder="0"
   src="https://www.youtube.com/embed/WWXfdIK1WxA?controls=1&rel=0&showinfo=0&autoplay=0&modestbranding=1&enablejsapi=1&html5=1&fs=0">
</iframe>

Я ожидаю, что смогу загрузить несколько элементов видео на мою индексную страницу, и у каждого видео будет свой проигрыватель, который я затем смогу получать или контролировать для получения информации через машинопись. Мне нужен способ устранить ошибку: «Uncaught TypeError: youTubeIframeAPIReady не является функцией» после создания последнего игрока.

Answer 1

Лучший способ вызвать другой метод из анонимной функции - использовать функцию стрелки для запуска метода, например:

let readyFuction = () => this.youTubeIframeAPIReady ();