angular - Angular2 上的 Youtube Iframe

Question

我正在尝试在 Angular2 应用程序中添加 Youtube Iframe。如果我将 url 放入 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

我觉得跟app从服务器取数据的时间有关。当页面加载时没有 {{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);    
  }
}