我正在尝试在 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 没有更新。
有什么解决办法吗?
最佳答案
您可以使用 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);
}
}
关于angular - Angular2 上的 Youtube Iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40402849/