在Angular循环中，Iframe无法停止重新加载

Question

我正在为论坛页面中的评论部分工作，其中我使用tinyMCE提供内容。评论的内容正在被异步地添加到预先存在的评论对象(*ngFor)的循环中，并在被添加到数据库后进行渲染。内容是通过调用一个返回已解码html内容的方法来呈现的innerHTML属性。

HTML代码：

<div [innerHTML]="trustContent(comment)">

该方法返回：

this.sanitizer.bypassSecurityTrustHtml(content);

然而问题是，每次我使用编辑器添加或嵌入媒体（如iframes），例如使用youtube视频时，所有视频/ iframes都会闪烁并无限重新加载。欢迎并感谢任何想法、建议和解决方案！ 谢谢 :)

- balfonso

Answer 1

经过这么长时间，你一定已经找到了解决方案，但是我想分享一下我是如何解决的。

我遇到了你描述的同样的问题，在我的情况下，解决方法是将url的值保存在一个字符串中而不是使用函数。

所以，不要用

<div [innerHTML]="trustContent(comment)">

我使用了

<div [innerHTML]="safeContent">

并在component.ts中

safeContent =  this.sanitizer.bypassSecurityTrustHtml(content);

这对我来说停止了无限循环

- Jorge Acúrcio

---

嗨@Jorge！非常感谢你的回答。我真的很喜欢它的简短和简洁。虽然我还没有尝试过你的解决方案，但我认为这可以轻松地在页面上的单个项目或视频iframe上工作。然而，在我的情况下，我需要创建一个可以由循环中的所有评论使用并共享到项目中其他组件的解决方案。再次感谢您的回答！我会稍后尝试并告诉您结果=) - balfonso

Answer 2

首先，对于延迟发布深感抱歉。最近几周非常忙碌，我没有时间发布我的答案。无论如何...为了受益于那些可能遇到同样问题的人，我通过使用管道来解决了这个问题。因此，我创建了一个简单的自定义管道，可以转换给定内容并返回安全可信的HTML。

该管道：

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


@Pipe({ name: 'safe_html' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

然后在视图上，内容/评论会呈现为：

<div [innerHTML]="comment.content  | safe_html"></div> 

再次强调，这些注释是在一个循环中输出的。

- balfonso

Answer 3

我遇到了同样的问题，我从REST API获取数据并将其存储到文章中。最初我使用了一个函数来返回安全内容，但这并没有解决问题，但当我使用变量而不是函数时，innerHTML DOM重新加载的问题得到了解决。

demo.compoment.html

<div [innerHTML]="safeContent" *ngIf="( posts != undefined) && ( posts != null)" class="py-2"></div>

demo.component.ts

ngOnInit() {
    ...
    this.safeContent = this.sanitizer.bypassSecurityTrustHtml(this.posts.html);
    ...
}

我希望它也能解决您的问题。

- isamrish

---

谢谢，它起作用了。由于某种原因，innerHTML 调用了一个循环并刷新了所有内容。 - grijalvaromero

Answer 4

即使缓存了安全 URL，我仍然遇到了同样的问题。事实证明，如果您为多个 iframe 使用安全 URL，则会出现问题。

每个 iframe 都需要自己的 data-url-instance。

- wutzebaer