ngFor youtube链接与Angular2中的Domsanitizer [英] ngFor youtube links with Domsanitizer in Angular2

问题描述

我的模拟内存数据库中有youtube链接，我想要* ng从youtube获得这些视频.

I have youtube links in my mock memory database and I want to *ngFor these videos from youtube.

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

        ];

像这样.

我使用服务将组件与服务器连接，现在在html中， 让v的视频.在iframe标记中.我做到了

I used service to connect my component with the server and now in the html, I have let v of videos. And within the iframe tages.. I did

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

但是，由于它是外部资源，所以他们告诉我使用Domsanitzer，但我被困在这一部分.

But since it's external source, they are telling me to use Domsanitzer but I am stuck at this part.

我不知道该如何清除应该循环的链接.

I don't know how to sanitize links that are supposed to be looping.

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

<-我不知道在这里添加什么.

<- I don't know what to add here.

推荐答案

您可以创建如下管道:

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

并通过以下方式使用它:

And use it the following way:

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

柱塞示例

Plunker Example

另请参见

• 如何设置Angular 2中的iframe src不会导致不安全值"异常?

这篇关于ngFor youtube链接与Angular2中的Domsanitizer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！