ngFor YouTube ссылки с Domsanitizer в Angular2

У меня есть ссылки на youtube в моей базе данных mock memory, и я хочу *ngFor эти видео с youtube. 

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

        ];

Вот так.

Я использовал сервис для подключения моего компонента к серверу и теперь в html, у меня есть пусть v видео. И в пределах iframe tages.. Я сделал 

<iframe src=v.videoURL></iframe>
Но так как это внешний источник, они говорят мне использовать Domsanitzer, но я застрял на этой части.

Я не знаю, как очистить ссылки, которые должны быть циклическими. 

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

1 2
youtube sanitize

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>

Пример Плунжера

См. также

7