iframe加载无限角度2答案

【问题标题】：Iframe loading infinitely angular 2iframe加载无限角度2
【发布时间】：2018-12-11 17:40:47
【问题描述】：

我正在尝试在 Angular 2 项目中创建非常简单的 iframe。 Code

如果我在 iframe src 中使用原始 url，则会收到错误 unsafe value used in a resource URL context

<!-- 1) Error : unsafe value used in a resource URL context -->
<iframe (load)="yourLoadFunction()" [src]="'/'" frameborder="0" width="1000px" height="500px"></iframe>

如果我使用DomSanitizer.bypassSecurityTrustResourceUrl 进行 url 清理，它可以工作，但 iframe 加载无限时间，奇怪的嗯。 Code (check console)

<!-- 2) Infinite loop Iframe loading  -->
<iframe (load)="yourLoadFunction()" [src]="sanitizer.bypassSecurityTrustResourceUrl('/')" frameborder="0" width="1000px" height="500px"></iframe>

所以，我已经为下面的 url 创建了管道，它的工作没有问题

safe-url.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

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

HTML 视图

 <!-- 3)  Working with pipe -->
 <iframe (load)="yourLoadFunction()" [src]="'/' | safeUrl" frameborder="0" width="1000px" height="500px"></iframe>

现在，我有问题

为什么在纯 html iframe 工作的角度出现错误 unsafe value used in a resource URL context
为什么DomSanitizer.bypassSecurityTrustResourceUrl 导致iframe 无限加载，但pipe 却没有相同的功能

【问题讨论】：

标签： javascript angular iframe angular-dom-sanitizer

【解决方案1】：

因为当您将一个方法传递给模板绑定时，该方法在每个更改检测周期都会被调用。

Angular 无法查看标记中的方法返回的值是否与之前没有实际调用的值相同。

它返回一个SafeResourceUrl，我相信其中包含了可以随每次调用而改变的元数据。

另一方面，除非 input 值发生变化，否则不会再次调用管道。

这就是为什么通常最好不要将方法调用直接绑定到输入值。

【讨论】：