加载屏幕的跟踪时间：Angular2

问题描述：

我已经在我的Angular 2应用程序中添加了一个加载组件，其中显示了每次对webapi的异步调用的加载动画。我想向该加载组件添加另一个功能。即，如果加载时间超过5秒，那么我想在加载动画之上显示帮助信息。因此，我有什么建议如何'追踪'加载动画的时间？我猜应该有一个Javascript函数，但找不到任何可以使这项工作。加载屏幕的跟踪时间：Angular2

您是不是说角度应用程序和DOM的初始加载/引导需要多长时间，或者只是一个组件？显示您尝试的一些代码 –

答

如果你匆忙，这样的东西适合我。

import { Component, OnInit } from '@angular/core'; 
import { Http } from "@angular/http"; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/delay'; 

@Component({ 
    selector: 'your-selector', 
    template: ` 
    <div> 
     <h1 *ngIf="firstLoader">First Loading...</h1> 
     <h1 *ngIf="secondLoader">Second Loading..</h1> 
    </div> 
    `, 
    styles: [] 
}) 
export class YourComponent implements OnInit { 

    firstLoader: boolean = true; 
    secondLoader: boolean = false; 

    constructor(
    private _http: Http 
) { } 

    ngOnInit() { 
    setTimeout(() => { 
     this.secondLoader = true; 
    }, 1000); // your second loader interval 
    this._http.get('https://jsonplaceholder.typicode.com/photos') 
     .map(res => res.json()) 
     .delay(2000) // add network throttling 
     .subscribe(res => { 
     // console.log(res); 
     this.firstLoader = false; 
     this.secondLoader = false; 
    }) 
    } 
}

加载屏幕的跟踪时间：Angular2

相关推荐