Youtube Iframe on Angular2

Question

我試圖在Angular2應用程序內添加一個Youtube Iframe。如果我把網址中的iFrame一切工作正常：

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

但是，如果我嘗試從服務器獲取網址，以在組件中的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);  
    } 
}