Angular 生命周期的角度

我正在使用

*ngFor

迭代一些数据，如下所示：

<div *ngFor="let d of [1, 2, 3]"> {{d}} </div>

我用它：

<div *ngFor="let d of [1, 2, 3]"> {{logAndReturn(d)}} </div>

添加的函数现在被调用了12次（每个项调用4次）

以下是您可以自己测试的代码：

---

我的代码错了吗？有什么办法可以防止这些额外的呼叫吗？为什么会发生这种情况，有人能解释一下吗？

这个问题与

*ngFor

无关，它是插值

（{}}）中
表达式的正常行为。angular会多次调用它，以检查
表达式是否已更改。插值用于获取（打印）
表达式
，不建议调用
方法
。它会不必要地开火

在视图中使用方法与使用不纯管道相同。此代码将在视图上的每个事件中执行，这可能会执行很多次。在我们的示例中，
logAndReturn（）
方法只返回一个数字，因此可以假定在视图中运行它，但如果它要执行更复杂的操作，则可能会造成很大的性能问题。通过一个简单的程序，您可以检查console.log，查看在哪个步骤中打印“logAndReturn”的跟踪。这是新组件的外观：

export class AppComponent implements 
OnChanges,
OnInit,
DoCheck,
AfterContentInit,
AfterContentChecked,
AfterViewInit,
AfterViewChecked,
OnDestroy
{
  private var01: string = "default value";
  constructor( private trans: TranslatorService ){}
  ngOnChanges (){
     console.log('Trace OnChanges');
  }
  ngOnInit (){
     console.log('Trace onInit');
  }
  ngDoCheck (){
     console.log('Trace doCheck');
  }
  ngAfterContentInit(){
     console.log('Trace After Content Init');
  }
  ngAfterContentChecked(){
     console.log('Trace after contente checked');
  }
  ngAfterViewInit(){
     console.log('Trace after view init');
  }
  ngAfterViewChecked(){
     console.log('Trace after view checked');
  }
  ngOnDestroy(){
     console.log('Trace on destroy');
  }
  testRender() {
    console.log('trace 01');
    return 'This is a test that runs a console log'
  }
  (...)
}

要深入了解这里真正发生的事情，请阅读Angular 2关于

<div *ngFor="let d of [1, 2, 3]"> {{logAndReturn(d)}} </div>

1
2
3
1
2
3

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

1
2
3
1
2
3

export class AppComponent implements 
OnChanges,
OnInit,
DoCheck,
AfterContentInit,
AfterContentChecked,
AfterViewInit,
AfterViewChecked,
OnDestroy
{
  private var01: string = "default value";
  constructor( private trans: TranslatorService ){}
  ngOnChanges (){
     console.log('Trace OnChanges');
  }
  ngOnInit (){
     console.log('Trace onInit');
  }
  ngDoCheck (){
     console.log('Trace doCheck');
  }
  ngAfterContentInit(){
     console.log('Trace After Content Init');
  }
  ngAfterContentChecked(){
     console.log('Trace after contente checked');
  }
  ngAfterViewInit(){
     console.log('Trace after view init');
  }
  ngAfterViewChecked(){
     console.log('Trace after view checked');
  }
  ngOnDestroy(){
     console.log('Trace on destroy');
  }
  testRender() {
    console.log('trace 01');
    return 'This is a test that runs a console log'
  }
  (...)
}