DOM在滚动事件上重新附加IFrame

Question

当我向下滚动时，我遇到了一个关于DOM重新渲染的奇怪问题。我有一堆需要在页面上呈现的OEmbed数据，但似乎无法在滚动时重新加载所有嵌入内容的情况下呈现它。

https://plnkr.co/edit/qklbNzvDSOzoI2t0K7fA?p=preview

我现在有这样的事情：

<div class="content embed" *ngIf="item.template == 'embed'">
  <span [innerHTML]="trustHtml(item.embed.html)"></span>
</div>

关于如何防止重新渲染的任何想法？

Answer 1

看起来是因为我在循环内部运行了一个trustHtml。我将它抽象到API响应层，现在就像魅力一样。所以而不是：

<div class="content embed" *ngIf="item.template == 'embed'">
  <span [innerHTML]="trustHtml(item.embed.html)"></span>
</div>

我在做：

<div class="content embed" *ngIf="item.template == 'embed'">
  <span [innerHTML]="item.embed.html"></span>
</div>

然后在我的API响应层中（在结果通过观察者传递给组件之前）我有：

item['html'] = this.sanitizer.bypassSecurityTrustHtml(item['html']);