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?