加载 iframe 的动态列表 - “错误：需要安全的 ResourceURL”答案

【问题标题】：Loading dynamic list of iframes - "Error: Required a safe ResourceURL"加载 iframe 的动态列表 - “错误：需要安全的 ResourceURL”
【发布时间】：2018-02-06 02:09:07
【问题描述】：

我在从 YouTube 加载一些 iframe 视频时遇到了问题，因为有一个动态的 url 列表。

我有这个 HTML：

<div fxLayout="column">

  <div *ngFor="let v of videos">
    <div fxLayout="row">
      <div>
        Type: {{v.type}}
      </div>
      <div>
        <iframe width="420" height="315"
                [src]="getVideoURL(v)">
        </iframe>
      </div>
    </div>

  </div>

</div>

这是我的 Angular 代码：

import { Component, OnInit } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  templateUrl: './docs.component.html',
  styleUrls: ['./docs.component.scss']
})
export class DocsComponent implements OnInit {

  videos = [
    {type:'installation', val:'https://www.youtube.com/embed/tgbNymZ7vqY'},
    {type:'usage', val: 'https://www.youtube.com/watch?v=ahla7JgpDEE'},
    {type:'keyboard shortcuts',val:'https://www.youtube.com/watch?v=bVYXWVs0Prc'}
    ];

  constructor(private sanitizer: DomSanitizer) {

  }

  ngOnInit() {
  }

  getVideoURL(v: any){
    return this.sanitizer.bypassSecurityTrustUrl(v.val)
  }
}

我收到此错误：

错误：需要一个安全的 ResourceURL，得到一个 URL

有人知道如何解决这个错误吗？

【问题讨论】：

标签： javascript angular iframe angular5

【解决方案1】：

答案如下：

使用这个：

 return this.sanitizer.bypassSecurityTrustResourceUrl(url);

代替：

 return this.sanitizer.bypassSecurityTrustUrl(url);

【讨论】：