Angular2上的Youtube iframe

Question

我试图在Angular2应用程序中添加Youtube Iframe.如果我把网址放在iFrame中,一切正常:

<iframe width="560" height="315" src="http://www.youtube.com/embed/wzrnuUOoFNM" frameborder="0" allowfullscreen></iframe>

但是,如果我尝试从服务器获取URL,并在组件中使用OnInit方法订阅,就像这样,

<iframe width="560" height="315" src="http://www.youtube.com/embed/{{video.id}}" frameborder="0" allowfullscreen></iframe>

视频未显示,控制台显示以下错误:

Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter

我认为它与应用程序从服务器获取数据的时间有关.当页面加载时没有{{video.id}}因为还没有准备好,但是当由于任何原因准备就绪时iframe没有更新.

任何解决这个问题的想法？

Answer 1

您可以使用 DomSanitizer传递Angular的内置清理.

import {Component} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `    
    <iframe width="560" height="315" [src]="url" frameborder="0" allowfullscreen></iframe>
  `,
})
export class App {
  name:string;
  video: any = {id: 'wzrnuUOoFNM'};
  baseUrl:string = 'https://www.youtube.com/embed/';
  constructor(private sanitizer: DomSanitizer) { 
    this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.baseUrl + this.video.id);    
  }
}