角度2は、表示する前に1ページを何回レンダリングしますか？

Question

私はプロジェクトにAngular 2を使用しています。

：私は同じ出力にこのような多くの時間を取得するページをロードすると

<div>{{ test() }}</div> 

private test(): void { 
    console.log("Test text"); 
} 

：私はこのような単純なテキストを出力し、私.TSファイル内の関数を呼び出して、私のテンプレートで簡単なdiv要素を持っています

Test text 
Test text 
Test text 
Test text 
Test text 

これは、Angular 2がテンプレートを実際に表示する前に何度もテンプレートをレンダリングし、その結果毎回機能を呼び出すことを意味しますか？ ChangeDetectionStrategyが常にあるので、

Answer 1

はいそれは、複数の時間をレンダリング「デフォルト」とは、UIの更新を常に（複数回）をチェック意味

ChangeDetectionStrategy.OnPush 使用OnPush：OnPushは変化検出器のモードがCheckOnceに設定されることを意味します水和中。

あなたがChangeDetectionStrategy.OnPushを使用する場合、それは一度だけ

changeDetection印刷します：ChangeDetectionStrategy.OnPush

https://angular.io/api/core/ChangeDetectionStrategy

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

Code Snippet 
    @Component({ 
     changeDetection: ChangeDetectionStrategy.OnPush, 
     selector: 'my-app', 
     template: ` 
     <div> 
     Check Console 
      <h2>{{print()}}</h2> 
     </div> 
     `, 
    }) 
    export class App { 
     name:string; 
     constructor() { 
     this.name = `Angular! v${VERSION.full}` 
     console.log("Called Once") 
     } 

     print(): void { 
     console.log("I am printing only one time"): 
     } 
    } 

Answer 2

角度がAppComponentをレンダリングし、それが子コンポーネントです一度だけ削除します。 DOMを追加すると、これらの追加された部分が再びレンダリングされます。

あなたが経験することは、かなり頻繁に実行される角度変化検出です。 Why event triggers ChangeDetection even if OnPush strategy is ON?も参照してください。

通常、値バインディングで関数を使用するのは悪い考えですが、そのような関数はAngular run change detectionのたびに呼び出されるからです。

値をプロパティに割り当て、代わりにこのプロパティにバインドすることをお勧めします。

<div>{{ testVal }}</div> 

ngOnInit() { 
    this.testVal = this.test(); 
} 

private test(): string { 
    console.log("Test text"); 
    return 'some string'; 
}