跟踪加载屏幕的时间:角度2

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