Question

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

如果我在iframe src中使用原始网址，则会收到错误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进行网址清理，则可以使用，但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使用相同的功能

Answer 1

由于将方法传递到模板绑定中时，该方法称为每个更改检测周期。

Angular在没有实际调用的情况下无法看到标记中方法返回的值是否与以前相同。

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

另一方面，除非 input 值已更改，否则不会再次调用管道。

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

iframe无限角度加载2

1 个答案: