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);    
  }
}

Angular2上的Youtube iframe

1 个答案: