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

Question

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

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked

参见：https://angular.io/guide/lifecycle-hooks

我用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://youtu.be/xMk01kMwXl8

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

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

Answer 1

你看到的不是 AppComponent 没有被渲染，而是因为它的子组件还在运行ning 它们的生命周期钩子。

Angular 生成这些组件的方式被称为 Unidirectional 这意味着它完成生命周期挂钩并更新 DOM 整个组件树 一个接一个 从根开始零件。
在每个组件上，Angular 将运行 change detection mechanism 与该组件相关联，并将确定该组件是否需要render/re-rendered，如果确实需要重新渲染，那么它会更新该组件的视图也会更新 DOM.
这个过程从组件树的根部向下直到
应用程序的叶组件

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

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

How to get the correct lifecycle hook in Angular 7

lifecycle

angular