Блог

Я не могу загрузить API Iframe YouTube в мое приложение Angular без обновления страницы. При загрузке страницы iframe загружается без каких-либо проблем, но при переходе на страницу с помощью маршрутизации страницы API не вызывается, и iframe не отображается. Я видел некоторые решения в Интернете, но они, похоже, не работают.

Любая помощь будет высоко оценена.

 **HTML**

<div *ngIf="selectedVideo amp;amp; ytLoading">
    <div id="player" style=" height: 500px; width: 100%;">
</div>

 

Компонент

  ytLoading = false;
  player: any;

  
  init() {
    this.ytLoading = true;
    console.log('loading init',this.ytLoading)
    if (this.ytLoading amp;amp; window['YT'] ) {
    
      this.cueVideoById(this.selectedVideo);
      return;
    }
    var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
    window['onYouTubeIframeAPIReady'] = () => this.cueVideoById(this.selectedVideo);
    console.log('WINDOW OBJ 2', window['YT'], 'API SCRIPT 2', tag )
   
  }

  ngOnInit() {


    this.ytLoading = false;
    this.init();

  }

  ngOnDestroy() {
    this.ytLoading = false;

    window['onYouTubeIframeAPIReady'] = null;
    if (this.player) {
      this.player.destroy();
    }
  }


  cueVideoById(selectedVideo) {
    console.log('hits via init', selectedVideo)
    this.player = new window['YT'].Player('player', {
      videoId: selectedVideo.id,
      playerVars: {
        modestbranding: 1,
        controls: 1,
        disablekb: 1,
        rel: 0,
        showinfo: 0,
        fs: 0,
        playsinline: 1
      },
      events: {
        'onStateChange': this.onPlayerStateChange.bind(this),
        'onError': this.onPlayerError.bind(this),
        'onReady': this.onPlayerReady.bind(this),
        
      }
    });


  }

 

Проблема была решена путем обновления метода ngOnDestroy

  ngOnDestroy() {
    window['YT'] = null;
    if (this.player) {
      this.player.destroy();
    }
  }