在展示它之前，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会渲染一个页面多少次？

回答

相关问题