ngFür Youtube-Links mit Domsanitizer in Angular2

Question

Ich habe Youtube-Links in meiner Mock-Memory-Datenbank und ich möchte * ngFür diese Videos von youtube.

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

     ]; 

wie diese.

Ich verwendete Service, um meine Komponente mit dem Server zu verbinden und jetzt in der html, ich habe lassen v videos. Und in der iframe teile .. Ich habe

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

Aber da es externe Quelle ist, sie sagen mich Domsanitzer zu verwenden, aber ich bin an diesem Teil stecken.

Ich weiß nicht, wie Links, die Schleifen sein sollen, bereinigt werden.

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

< - Ich weiß nicht, was Sie hier hinzufügen.

Answer 1

können Sie erstellen Rohr wie:

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

Und es folgende Art und Weise verwendet werden:

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

Plunker Example

Siehe auch

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