我正在研究论坛页面的 cmets 部分，我使用 tinyMCE 来提供内容。内容或评论在添加到数据库后被异步添加到预先存在的 cmets 对象的循环 (*ngFor) 中。内容由调用返回解码的 html 内容的方法的 innerHTML 属性呈现。
html代码：
<div [innerHTML]="trustContent(comment)">
方法返回：
this.sanitizer.bypassSecurityTrustHtml(content);
但是，问题是每次我添加或嵌入媒体（iframe）时，例如使用编辑器的 youtube 视频，所有视频/iframe 都会不停地闪烁和重新加载。欢迎和赞赏任何想法、建议和解决方案！谢谢:)
【问题讨论】：
过了这么久你一定找到了解决方案，但我会写下我解决我的方法。
我遇到了与您描述的相同的问题，就我而言，我解决的方法是将 url 的值保存在字符串中，而不是使用函数。
所以不是有
<div [innerHTML]="trustContent(comment)">
我用过
<div [innerHTML]="safeContent">
在component.ts
中safeContent = this.sanitizer.bypassSecurityTrustHtml(content);
这为我停止了无限循环
【讨论】：
首先，对于迟到的帖子表示歉意。过去几周一直很忙，直到现在我都没有时间发布我的答案。无论如何......为了那些可能遇到同样问题的人的利益，对我有用的是通过使用管道。所以我创建了一个简单的自定义管道，它可以转换给定的内容并返回一个安全可信的 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);
}
}
然后在视图上，内容/cmets 呈现为
<div [innerHTML]="comment.content | safe_html"></div>
重申一下，cmets 是在循环中输出的。
【讨论】：
我遇到了同样的问题，我从 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);
...
}
我希望它也能解决你的问题。
【讨论】：
即使在缓存了安全 url 之后，我也遇到了同样的问题，事实证明，如果您将安全 url 用于多个 iframe，就会出现问题。
每个 iframe 都需要它自己的 data-url-instance。
【讨论】：