Question

我遇到了Angular 2的一些问题，因为它多次运行模板。看起来我拥有的路由和组件越多，它就越糟糕，它可以通过模板运行多达200次，使我的计算机上的风扇变成香蕉。

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

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

@Component({
  selector: 'my-app',
  template: `{{loop()}}`,
})

export class AppComponent  {
  msg: string = 'hey';
  loop() {
    console.log(this.msg);
  }
}

控制台：

app.component.ts:11 hey
app.component.ts:11 hey
app.component.ts:11 hey
app.component.ts:11 hey

Answer 1

将在组件的每次检测中调用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 {}

Angular 2多次渲染模板

1 个答案: