画面を読み込むためのトラック時間：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; 
    }) 
    } 
}