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

У меня есть ссылки на YouTube в моей базе данных фиктивной памяти, и я хочу *ngFor эти видео с 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('')

‹- Я не знаю, что здесь добавить.


angular youtube angular-dom-sanitizer sanitize
person Lea    schedule 28.02.2017    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Вы можете создать канал, например:

@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>

Пример плункера

Смотрите также

person yurzui    schedule 28.02.2017