为什么我的Angular2模板的一小部分即使没有变化也会继续重新渲染？

Question

我有一个Angular2组件，它根据来自无头CSM的数据呈现页面片段。特别是，该组件使用如下模板呈现页脚：

<div class="footer">
    <div class="row">
        <div class="col s12 m6" *ngFor="let column of footer">
             <div [innerHtml]="sanitizer.bypassSecurityTrustHtml(column)"></div>
        </div>
    </div>
</div>

其中this.footer是包含HTML字符串数组的私有变量。 this.footer中设置了ngOnInit()。整个模板比这大得多。

我的问题是模板的这个特定片段每1-2秒重复渲染。这使得无法选择页脚中的联系人详细信息，因为所选的HTML节点被新的（相同的）节点替换，因此选择被重置。

页面的其余部分以类似的方式呈现，但它没有表现出这个问题。如果我查看Chrome调试器中的元素，我可以在替换时看到此特定片段的<div>s闪存。

我正在记录ngOnInit()和ngOnChanges()但是在重新渲染期间它们没有运行。

我对导致这种情况的原因感到茫然。

Answer 1

如果绑定到视图中的函数，则每次更改检测运行时都会调用它们。

如果sanitizer.bypassSecurityTrustHtml(column)为每次调用返回不同的对象实例，Angular会再次呈现[innerHTML]部分，因为它会将其识别为更改。

首选将函数结果分配给组件中的属性，然后将此属性绑定到视图中。