Angular ngFor 生命周期 [英] Angular ngFor lifecycle

问题描述

我正在使用 *ngFor 来迭代一些这样的数据:

{{d}} </div>

一切都很好，我得到了预期的结果:

1 </div><div>2
<div>3

然后，我想我是不是用了一个函数而不是{{d}}，所以我写了一个函数:

protected logAndReturn(item) {控制台日志(项目)；归还物品;}

我用过:

{{logAndReturn(d)}} </div>

我得到了与第一个代码相同的渲染 HTML 结果，但控制台输出不是我预期的输出.控制台输出:

123123Angular 在开发模式下运行.调用 enableProdMode() 以启用生产模式.123123

添加的函数现在被调用了 12 次(每个项目 4 次)

这是您可以自己测试的代码:jsfiddle

我的代码有错吗?是否有任何解决方案可以防止这些额外调用?为什么会发生这种情况，谁能解释一下?

解决方案

在视图中使用方法与使用不纯管道相同.此代码将在视图上的每个事件中执行，这可能会执行很多次.在我们的示例中，logAndReturn() 方法只返回一个数字，因此可以假设在视图中运行它，但如果它会做一些更复杂的事情，它可能是一个很大的性能问题.使用一个简单的程序，您可以检查 console.log 以查看logAndReturn"的跟踪是在哪一步打印的.这是新组件的外观:

导出类 AppComponent 实现OnChanges，初始化，做检查，内容初始化后，内容检查后，在视图初始化之后，经过查看检查，销毁时{私有 var01: string = "默认值";构造函数(私有翻译: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('内容检查后跟踪');}ngAfterViewInit(){console.log('查看初始化后的跟踪');}ngAfterViewChecked(){console.log('查看后跟踪');}ngOnDestroy(){console.log('销毁跟踪');}测试渲染(){console.log('trace 01');return '这是一个运行控制台日志的测试'}(……)}

要更深入地了解这里真正发生的事情，请阅读关于 生命周期

I'm using *ngFor to iterate some data like this:

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

Everything is fine and I got the result as expected:

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>

Then, I wondered if I use a function instead of {{d}}, so I wrote a function:

protected logAndReturn(item) {
    console.log(item);
    return item;
}

and I used it:

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

I got the same rendered HTML result as the first code, but console output wasn't my expected output. Console output:

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

The added function was called 12 times now (4 time for each item)

Here is the code that you can test it yourself: jsfiddle

Is my code wrong? Is there any solution to prevent these extra calls? Why did this happen and can anybody explain it a little?

解决方案

using methods in the view is the same that using impure pipes. This code will be executed in each event on the view, which can be a lot of times. In our example, the logAndReturn() method only returns a number so it can be assumable to run it in a view but if it would do something more complex, it could be a big problem of performance. with a simple program you can check console.log to see in which step the trace of "logAndReturn" is printed. This is the look of the new component:

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'
  }
  (...)
}

To go deeper in what really is happening here, read the official documentation of Angular 2 about the life cycle

这篇关于Angular ngFor 生命周期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！