加载屏幕的跟踪时间:Angular2
问题描述:
我已经在我的Angular 2应用程序中添加了一个加载组件,其中显示了每次对webapi的异步调用的加载动画。我想向该加载组件添加另一个功能。即,如果加载时间超过5秒,那么我想在加载动画之上显示帮助信息。因此,我有什么建议如何'追踪'加载动画的时间?我猜应该有一个Javascript函数,但找不到任何可以使这项工作。加载屏幕的跟踪时间:Angular2
答
如果你匆忙,这样的东西适合我。
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;
})
}
}
您是不是说角度应用程序和DOM的初始加载/引导需要多长时间,或者只是一个组件?显示您尝试的一些代码 –