Question

我在Angular 2应用程序中添加了一个加载组件，我在每次对webapi的异步调用中显示加载动画。我想为该加载组件添加另一个功能。即，如果加载时间超过5秒，那么我想在加载动画之上显示一条帮助消息。所以任何建议我如何跟踪＆＃39;加载动画的时间？我猜测应该有一个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;
    })
  }
}

跟踪加载屏幕的时间：Angular2

1 个答案: