ngの場合でも、コンポーネントのイベントが発生しても再描画できます。

Question

angle.io sample plunkrのRC1フォークを使用してAngular（2）に関する質問があります。 ngForテンプレート内のデータバインディング機能は、ngFor以外のイベントで変更検出が真であるかのように動作します。私の例では、ngFor以外のボタンをクリックします。

私はtrackBy関数を使用して試してみましたが（私はそれを正しく使用しているかどうかは不明ですが）。これは非常にコストがかかる可能性があるので、すべてのアクションがngForの再描画を引き起こさないようにする方法を理解できません。ログの

結果クリック：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <button (click)="clickOustideFunction()" >hi</button> 
     <h1 *ngFor="let d of data;trackBy:a"> 
     My First Angular 2 App{{drawingForFunction()}} 
     </h1>` 
}) 
export class AppComponent { 
    data= [{"a":1}, {"a":2}]; 

    clickOustideFunction(): void { 
     console.log("button"); 
    } 

    drawingForFunction(): void { 
     console.log("drawing"); 

    } 

} 

：あなたは問題がコンソールログを見て、この plunkrに住んで見ることができます

を描く

を描く

1. ボタン

Answer 1

デフォルトでは、各イベントの後にすべてのテンプレートバインディングの変更がチェックされます。通常、NgForループは{{data.a}}のようなバインディングを持ち、変更検出が実行されるたびにこれらのバインディングはすべてダーティチェックされます。代わりに{{drawingForFunction()}}のような関数がある場合、これらの関数は変更検出が実行されるたびに評価されます。

Angularは変更を認識または検出した場合にのみDOMを変更するため、変更がない限り再描画されません。また、変更されたアイテムだけがレンダリングされます（ビュー全体ではありません）。

変更検出ストラテジをOnPush使用すると、コンポーネントの変更の確認頻度を減らすことができます。