Как получить правильный крюк жизненного цикла в Angular 7 - PullRequest
Новая
       28

Как получить правильный крюк жизненного цикла в Angular 7

0 голосов
/ 11 июля 2019

Я пытаюсь получить метку времени с помощью performance.now (), когда Angular загрузил представление и показывает компоненты.В официальных документах приведен ряд различных возможностей:

  • 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.Но когда это зарегистрировано, компоненты еще не были показаны.Мне нужно запустить какой-то код (например, получить временную метку), когда компоненты действительно показываются пользователю, чтобы я мог сравнить разницу с моментом начала загрузки страницы.

Возможно ли это, и если да, то как это сделать?Я делаю это?

1 Ответ

2 голосов
/ 11 июля 2019

То, что вы видите, это не AppComponent, которые не будут отображаться, а потому, что его дочерний компонент все еще выполняет свою ловушку жизненного цикла.

  • Способ генерирования Angular этих компонентов известен как Однонаправленный , что означает, что он завершает ловушку жизненного цикла и обновляет DOM всего дерева компонентов один за другим , начиная с корневого компонента.

  • На каждом компоненте Angular будет запускать механизм обнаружения изменений , связанный с этим компонентом, и будет определять необходимость рендеринга / восстановления компонента.рендеринг, если требуется повторная визуализация, обновит представление этого компонента и обновит DOM.

  • Этот процесс выполняется от корня дерева компонентов до
    конечные компоненты приложения

Итак, вы видели, что AppComponent уже завершил свои хуки жизненного цикла и будет обработан, но его дочерний компонент все еще работает.И ngAfterViewInit () - это метод, который гарантированно будет запущен после инициализации компонента как View.

...