时间戳

首页 > 解决方案 > iframe加载无限角度2

javascript - iframe加载无限角度2

问题描述

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

如果我在 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 sanitize，它可以工作，但 iframe 加载无限时间，奇怪的嗯。代码（检查控制台） 

<!-- 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>

现在，我有问题

标签： javascriptangulariframeangular-dom-sanitizer

解决方案

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

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

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

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

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

推荐阅读