在展示它之前，Angular 2會渲染一個頁面多少次？

我正在使用Angular 2作爲我的項目。我有我的模板簡單的DIV這在我的.ts文件調用一個函數，輸出一個簡單的文本是這樣的：在展示它之前，Angular 2會渲染一個頁面多少次？

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

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

當我打開一個網頁，我得到了相同的輸出很多次是這樣的：

Test text 
Test text 
Test text 
Test text 
Test text

這是否意味着角2渲染模板很多次，它實際上表明它每一次因此調用函數？

來源

2017-08-04 Nisdex

這意味着，它觸發變化檢測了很多次，閱讀[一切你需要了解的角度變化檢測（https://hackernoon.com/everything-you-need-to-know-about- change-detection-in-angular-8006c51d206f） –

是它呈現多的時間，因爲ChangeDetectionStrategy始終是「默認」意味着它經常檢查（多次）的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"): 
     } 
    }

來源

2017-08-04 13:43:07

@Nisdex希望這個答案對您有幫助嗎？ –

角呈現AppComponent和它的子組件只有一次，除了添加刪除部分DOM，那麼這些添加的部分將再次呈現。

你體驗什麼是它運行相當頻繁Angulars變化檢測。另見Why event triggers ChangeDetection even if OnPush strategy is ON?。

它通常是一個壞主意，使用函數在值綁定，因爲這樣的功能都會被調用運行角度變化檢測時間。

寧可值到屬性和綁定分配給此屬性。

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

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

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

來源

2017-08-04 13:49:58

在展示它之前，Angular 2會渲染一個頁面多少次？

回答

相關問題