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

Question

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

html代码：

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

方法返回：

this.sanitizer.bypassSecurityTrustHtml(content);

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

Answer 1

这么久以后，您一定已经找到了解决方案，但是我将写出解决问题的方式。

我遇到了与您描述的问题相同的问题，就我而言，我解决该问题的方法是将url的值保存在字符串中，而不是使用函数。

所以不要

<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> 

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