Question

当Angular加载视图并显示组件时，我正在尝试使用performance.now（）获得时间戳。在官方文档中，列出了一系列不同的可能性：

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked

我使用ng new制作了一个项目，该项目非常简单，内容如下：

testing.component.html

<p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>

app.component.html

<app-testing *ngFor="let i of Arr(num).fill(1)"></app-testing>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  Arr = Array; //Array type captured in a variable
  num:number = 10000;

  timeBefore : number = 0;
  timeAfter : number = 0;

  ngOnChanges(){
    console.log('ngOnChanges');
  }

  ngOnInit(){
    console.log('ngOnInit');
    this.timeBefore = performance.now();
  }

  ngDoCheck(){
    console.log('ngDoCheck');
  }

  ngAfterContentInit(){
    console.log('ngAfterContentInit');
  }

  ngAfterContentChecked(){
    console.log('ngAfterContentChecked');
  }

  ngAfterViewInit(){
    console.log('ngAfterViewInit');
  }

  ngAfterViewChecked(){
    console.log('ngAfterViewChecked');

    this.timeAfter = performance.now();

    console.log(this.timeAfter - this.timeBefore + " took miliseconds!");
  }
}

我制作了一个演示我的问题的视频：

https://angular.io/guide/lifecycle-hooks

在视频中，您可以看到我记录了所有的钩子，最后记录的是ngAfterViewChecked。但是，记录下来后，组件尚未显示。当组件实际显示给用户时，我需要运行一些代码（例如获取时间戳），以便可以将差异与页面开始加载时的差异进行比较。

这有可能吗？如果可以的话，我该怎么做？

Answer 1

您看到的不是AppComponent尚未呈现，而是因为它的子组件仍在运行其生命周期挂钩。

Angular生成这些组件的方式称为 Unidirectional 表示完成生命周期挂钩并更新的DOM 整个组件树一个接一个从根开始零件。
在每个组件上，Angular将运行change detection mechanism 与该组件相关联，并将确定该组件是否需要渲染/重新渲染，如果确实需要重新渲染，则它将更新该组件的视图也更新DOM。
此过程从组件树的根开始一直进行到
应用程序的叶组件

所以您看到的是AppComponent已经完成了它的生命周期挂钩并被渲染，但是它的子组件仍在运行它们。 ngAfterViewInit（）是保证将组件初始化为View后运行的方法。

如何在Angular 7中获取正确的生命周期挂钩

1 个答案: