ngFor youtube 链接与 Angular2 中的 Domsanitizer

Question

我的模拟内存数据库中有 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('')

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

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

另见

ngFor youtube 链接与 Angular2 中的 Domsanitizer

ngFor youtube links with Domsanitizer in Angular2

angular

youtube

sanitize

angular-dom-sanitizer