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