如何在typescript中更改iframe src属性

Question

我正在创建一个ionic2应用程序。在这个应用程序中，我正在调用youtube API来从我的频道中获取视频。响应来的时候，它包含了我频道的所有视频ID。我想制作一个视频列表，当用户点击任何视频时，它将在列表上方创建的iframe上播放。我的代码到目前为止看起来像这样。

            <ion-item *ngFor="let video of videosListItems"> 
                 <button ion-button (click)="playVideo($event, video)">{{video.snippet.title}}</button>
            </ion-item>

上面的代码生成一个视频列表。当用户点击任何列表项时，然后调用playVideo函数。

playVideo(event, video){
  let playableUrl = 'https://www.youtube.com/watch?v='+video.id.videoId;
  this.videoUrl = playableUrl;
}

videoUrl是存在playVideo函数的类的数据成员。现在每当playVideo函数被调用，它就会将视频URL更新为变量this.videoUrl。到目前为止一切都很好。但是当我在iframe中使用这个变量videoUrl时。它没有加载该视频。

    <ion-card class="youtube">
        <iframe width="560" height="315" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>
    </ion-card>

我怎样才能做到这一点？任何帮助，将不胜感激。

Answer 1

试试这个：

playVideo(event, video){
      let playableUrl = 'https://www.youtube.com/watch?v='+video.id.videoId;
      this.videoUrl = playableUrl;
     (<HTMLIFrameElement>document.getElementById('videoIframe')).src = this.videoUrl;
}

在HTML中：

 <ion-card class="youtube">
        <iframe width="560" height="315" id="videoIframe" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>
    </ion-card>