Angular 2 - 例外：错误：资源 URL 上下文中使用的不安全值答案

【问题标题】：Angular 2 - EXCEPTION: Error: unsafe value used in a resource URL contextAngular 2 - 例外：错误：资源 URL 上下文中使用的不安全值
【发布时间】：2016-10-04 18:06:32
【问题描述】：

我收到以下错误：

Angular 2 - 例外：错误：资源 URL 上下文中使用的不安全值

这可能与启动时没有立即拥有媒体项目有关吗？还是与 URL 不安全有关？我正在尝试对其进行消毒。

export class HomeComponent {

  sanitizer: DomSanitizationService;
  errorMessage: string;
  activeMedia: MediaItem = new MediaItem(0, '', '', '', '', '', '');

  constructor(
    private mediaStorage: MediaStorageService, 
    private harvesterService: HarvesterService, 
    sanitizer: DomSanitizationService) {

    this.sanitizer = sanitizer;
    // Initial call - 
    harvesterService.getMediaItems(10, 'type', 'category');
    let subscription = harvesterService.initialMediaHarvestedEvent.subscribe(() => {
      this.activeMedia = mediaStorage.mediaList[0];
      let newURL = this.activeMedia.URL + '?rel=0&autoplay=1';
      newURL = newURL.replace('watch?v=', 'v/');
      this.activeMedia.URL = newURL; //sanitizer.bypassSecurityTrustUrl(newURL);
      console.log(newURL);
    });
  }

  cleanURL(oldURL: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustUrl(oldURL);
  }
}

模板代码为：

<div class="row" >
    <iframe 
      id="video"  
      class="video" 
      src="{{ cleanURL(activeMedia.URL) }}" 
      frameborder="0" 
      allowfullscreen>
    </iframe>
</div>

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

更新：更改后

 src="{{cleanURL(activeMedia.URL)}}"

到：

 [src]="cleanURL(activeMedia.URL)"

我得到：原始异常：错误：需要一个安全的 ResourceURL，得到一个 URL

通过将 cleanURL 方法中的代码更改为：

 return this.sanitizer.bypassSecurityTrustResourceUrl(oldURL);

代替：

 return this.sanitizer.bypassSecurityTrustUrl(oldURL);

【讨论】：

我已经设法使用此解决方案显示 PDF，但是 cleanURL() 方法运行多次，导致 pdf 闪烁。
不作为函数运行，保持值持久不评估

【解决方案2】：

试试这个：

cleanURL(oldURL: string): string  {
 return this._sanitationService.sanitize(SecurityContext.URL, oldURL);
}

【讨论】：