如何在Angular中检测组件在数据从服务器返回后是否完成重新渲染

18 浏览
0 Comments

如何在Angular中检测组件在数据从服务器返回后是否完成重新渲染

标题可能不够清楚，所以我将尝试进一步澄清我要解决的问题。

假设我有一个组件调用一个API，并使用返回的数据填充一个表格，我将添加一些示例代码如下：

因此，我的app.component.ts文件看起来可能是这样的：

import { Component } from '@angular/core';
import { IEmployee } from '../employee/employee';
import { EmployeeService } from '../app/app.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  employees: IEmployee[];
  constructor(private _employeeService: EmployeeService){}
ngOnInit(){
  this._employeeService.getEmployees().subscribe(employeeData => {
    this.employees = employeeData;
});
}
}

然后我的app.component.html看起来可能是这样的：

  
    
      {{ employee.code | uppercase}}
      {{ employee.name }}
      {{ employee.gender }}
      {{ employee.annualSalary}}
      {{ employee.dateOfBirth}}

服务文件看起来可能是这样的，尽管我不确定它是否有帮助：

@Injectable()
export class EmployeeService {
  constructor(private http: HttpClient) { }
  getEmployees(): Observable {
    return this.http.get("http://localhost:56879/api/employee");
  }
}

现在我要解决的问题是性能测量的问题。我需要能够测量自数据到达并且HTML已呈现的时间，这意味着我的表格已经使用我传递的数据完成呈现。

我面临的问题是我不知道如何检测组件何时完成视图的呈现。

我了解了生命周期钩子，但这些钩子似乎都不适用于我的情况，AfterViewInit（）在组件初始化时调用一次，之后再有任何变化都不会再触发它。AfterViewChecked（）被多次调用，但我只需要提取一次时间戳，即在标记完成呈现后获取时间。

我也稍微了解了RxJs，它有rx-dom库，但我无法将其集成到我的项目中。

还看到一些与benchmark.js相关的内容，但如果我理解正确，那是用于测试目的

我也阅读了Stack Overflow上的一些现有问题，它们与我的情况有些类似，但上下文不同：

How to call function after dom renders in Angular2

How to run a jquery function in Angular 2 after every component finish loading

How to determine all the angular 2 components have been rendered?

我需要这样做，以便能够实时测量性能，也就是说，每当页面发生变化时，我想捕获该渲染时间并计算自数据从服务器返回和视图渲染以来经过的时间。

对我来说，只有受影响的组件才是感兴趣的，而不是整个应用程序。由于我们将实时传输数据，这不会导致整个应用程序每次都重新加载，只会重新加载受影响的组件。

任何提示或指导都将非常有帮助，我已经没有更多的想法了。

0