Question

我正在撰写论坛页面的评论部分，其中我使用了tinyMCE来提供内容。添加到数据库后，内容或注释将在预先存在的注释对象的循环（* ngFor）中异步添加。内容由innerHTML属性呈现，该属性调用返回已解码的html内容的方法。

html代码：

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

方法返回：

this.sanitizer.bypassSecurityTrustHtml(content);

但问题是，每次我添加或嵌入媒体（iframe）时，例如youtube视频使用编辑器，所有视频/ iframe闪烁并无休止地重新加载。任何想法，建议和解决方案都受到欢迎和赞赏！谢谢:)）

Answer 1

经过这么长时间，你必须找到解决方案，但我会按照我解决的方式写出来。

我遇到了你所描述的同样问题，在我的例子中，我解决它的方法是将字符串的值保存在字符串中而不是使用函数。

所以没有

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

我用过

<div [innerHTML]="safeContent">

并在 component.ts

中

safeContent =  this.sanitizer.bypassSecurityTrustHtml(content);

这为我停止了无限循环

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>

重申一下，评论是在循环中输出的。

Answer 3

我遇到了同样的问题，我是从REST API获取数据并将其存储到帖子中的。最初我使用了一个函数来返回安全内容，但这并不能解决问题，但是当我使用变量而不是函数时出现了问题解决了内部HTML 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);
    ...
}

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

Answer 4

即使在缓存安全 url 后，我也遇到了同样的问题，结果证明如果您将安全 url 用于多个 iframe，问题就会发生。

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

iframe不会停止在Angular循环中重新加载

4 个答案: