私のAngular2テンプレートの一部が、変更がなくても再レンダリングを続けるのはなぜですか？

Question

ヘッドレスCSMからのデータに基づいてページフラグメントをレンダリングするAngular2コンポーネントがあります。具体的には、コンポーネントは次のようにテンプレートを使用して、ページのフッターをレンダリング：this.footerは、HTML文字列の配列を含むプライベート変数をある

<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はngOnInit()に設定されています。テンプレート全体がこれよりはるかに大きくなります。

私の問題は、テンプレートのこの特定のフラグメントが1〜2秒ごとに再レンダリングを続けるということです。これにより、選択したHTMLノードが新しい（同一の）ノードに置き換えられ、選択がリセットされるため、フッターにある連絡先の詳細を選択することが不可能になります。

その他の部分は同様の方法でレンダリングされますが、この問題は発生していません。 Chromeデバッガの要素を見ると、この特定のフラグメントフラッシュの<div>sが置き換えられて表示されます。

私はngOnInit()とngOnChanges()をログに記録していますが、この再レンダリング中に実行されていません。

私はこれを引き起こしているものとして紛失しています。

Answer 1

ビュー内の関数にバインドすると、変更検出が実行されるたびに呼び出されます。

sanitizer.bypassSecurityTrustHtml(column)が呼び出しごとに異なるオブジェクトインスタンスを返す場合、Angularは、変更としてそれが認識されるため、[innerHTML]の部分を再びレンダリングします。

あなたのコンポーネント内のプロパティに関数resultを割り当て、代わりにこのプロパティにビューにバインドすることをお勧めします。