iframe始终在Angular组件中重新渲染

问题描述

我有一个很奇怪的问题：我有一个超级简单的组件（ViewerComponent）。那里没有太多逻辑，仅传递一个URL来在iFrame中显示URL（查看器）。 HTML看起来像这样：

<iframe class="w-100 h-100 border-0" [src]="viewerUrl | safe: 'resourceUrl'"></iframe>

safe管道只是DOM Sanitizer。

问题在于，iFrame不断地被重新渲染。似乎它在每个变更检测周期中都被重新渲染。但是，奇怪的是viewerUrl从未更改。

此外，该组件并未销毁（我正在ngOnDestroy()中进行检查，但它从未在那里被销毁。为了使其更加不可思议，changeDetection被设置为OnPush ，也没有任何更改注册（签入ngOnChanges()）。

这是一个Angular 10应用程序。也许与此有关的一些错误？

任何帮助将不胜感激！

@更新：

请在此处查看安全管道：

@Pipe({
    name: 'safe'
})
export class SafePipe implements PipeTransform {
    constructor(protected sanitizer: DomSanitizer) {}

    transform(value: any,type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
        switch (type) {
            case 'html':
                return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style':
                return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script':
                return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url':
                return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl':
                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default:
                throw new Error(`Invalid safe type specified: ${type}`);
        }
    }
}

解决方法

我发现了问题所在。它被连接到管道，因为管道创建了对象的新实例，即该字符串的含义。

我通过注入src参数来解决此问题：

const iframe = this.elementRef.nativeElement.querySelector('iframe');
iframe.src = url;

url已通过保存管道进行了如下转换：

this.safePipe.transform(url,'resourceUrl');

angular angular2-changedetection iframe