ngFor YouTube與Angular2中的Domsanitizer鏈接

Question

我在我的模擬內存數據庫中有youtube鏈接，我希望* ng對於youtube中的這些視頻。

let videos: any[] =[ 
      {videoURL: "ZOd5LI4-PcM"}, 
      {videoURL: "d6xQTf8M51A"}, 
      {videoURL :"BIfvIdEJb0U"} 

     ]; 

這樣子。

我用服務來連接我的組件與服務器，現在在html中，我有 讓v的視頻。和iframe的每日新聞中..我做

<iframe src=v.videoURL></iframe> 

但因爲它是外部源，他們告訴我使用Domsanitzer但我停留在這一部分。

我不知道如何清理應該循環的鏈接。

constructor(private sanitizer: DomSanitizer) { 
    this.sanitizer.bypassSecurityTrustResourceUrl('') 

< - 我不知道要在這裏添加什麼。

Answer 1

您可以創建管道，如：

@Pipe({ name: 'safe' }) 
export class SafePipe implements PipeTransform { 
    constructor(private sanitizer: DomSanitizer) {} 
    transform(url) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    } 
} 

而且使用方式如下：

<div *ngFor="let video of videos"> 
    <iframe [src]="('https://www.youtube.com/embed/' + video.videoURL) | safe"></iframe> 
</div> 

Plunker Example

參見

• How to set iframe src in Angular 2 without causing `unsafe value` exception?