Angular 2多次渲染模板

我在Angular 2上遇到了一些问题，因为它在模板中多次运行。似乎我拥有的路由和组件越多，情况就越糟，它可以在一个模板中运行多达200次，让我电脑上的风扇发疯

下面是一个基本示例，我只使用基本的快速入门GIT，没有添加其他代码。此特定示例运行4次

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`{loop（）}}`，
})
导出类AppComponent{
msg:string='hey'；
循环（）{
console.log（this.msg）；
}
}

和控制台：

app.component.ts:11嘿
app.component.ts:11嘿
app.component.ts:11嘿
app.component.ts:11嘿

将在组件的每次检测中调用loop（）。尽量不要调用模板中的函数。例如，此代码将不断调用loop（），因为setInterval会导致更改检测。您可以使用ChangeDetection.OnPush

@Component({
  selector: 'my-app',
  template: `{{loop()}}`,
})
export class App  {
  msg: string = 'hey';
  constructor() {
    setInterval(()=> {console.log('x')});
  }
  loop() {
    console.log(this.msg);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

---

模板调用loop（），它更改组件的状态，触发更改检测，强制angular重新计算loop（），它更改组件的状态，触发更改检测等。不要从模板中角度表达式中调用的方法更改组件的状态。这些方法应该是幂等的，并且没有副作用。简而言之，多次调用loop（）是正常的，但它不应该改变组件的状态。这是有道理的，但它不能解决问题。如果我不添加++并且只使用一个静态值，它仍然会重复四次。这是正常的。别担心。只要确保该方法快速且幂等，并且没有副作用。