加載屏幕的跟蹤時間：Angular2

Question

我已經在我的Angular 2應用程序中添加了一個加載組件，其中顯示了每次對webapi的異步調用的加載動畫。我想向該加載組件添加另一個功能。即，如果加載時間超過5秒，那麼我想在加載動畫之上顯示幫助信息。因此，我有什麼建議如何'追蹤'加載動畫的時間？我猜應該有一個Javascript函數，但找不到任何可以使這項工作。

Answer 1

如果你匆忙，這樣的東西適合我。

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; 
    }) 
    } 
}