Angular2 RC1 实现加载指示器的最佳方法
Angular2 RC1 Best Approach to implement loading indicator
我正在尝试实现一个应用程序范围的加载栏。因此,当用户单击我的应用程序中的任何 link 并且正在下载数据时,它应该在顶部显示一个加载栏。
像这样:
http://chieffancypants.github.io/angular-loading-bar/
目前,我所做的是添加一个带有布尔值 属性 的全局单例服务,isLoading。在我的主要应用程序组件模板中,我添加了 angular material2 进度条。
<md-progress-bar mode="indeterminate" *ngIf="_globalService.isLoading"></md-progress-bar>
现在,每当我发起一个 http 请求时,我都会在该组件中将该服务的 isLoading 属性 设置为 true。当该请求完成时,我将其设置为 false。
在我目前的情况下,我必须在所有组件中注入服务并手动将 isLoading 设置为 true 或 false。
我想知道有没有什么方法可以捕获我的应用程序中所有 ajax 请求的启动和完成,这样我就可以订阅它,而不必手动处理它。
我可以看到两种方法来完成您想要的事情。第一个是将所有的Http请求抽象为专用服务,第二个是包装Http服务。
服务。无论如何,从您的组件发出 Http 请求可能不是最好的主意,因此更好的方法是将 http-stuff 移动到专用服务并从那里设置 _globalService.isLoading
标志。组件不应该知道这些事情,它只会关心 "getAccounts" 等事情。因此抽象实际的 Http 请求可以使加载指示器标志从组件代码中隐藏。
包装默认 Http 服务。完全有可能将 Http 服务包装到更多层中,从中可以设置 isLoading
标志。在这种情况下,组件代码也不会知道有关加载指示器机制的任何信息。
可能的包装器可能如下所示:
import {Http} from '@angular/http';
import {Injectable} from '@angular/core';
import {GlobalService} from './globalService';
export class HttpLoading extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _globalService: GlobalService ) {
super(backend, defaultOptions);
}
get(url: string, options?: RequestOptionsArgs) {
this._globalService.isLoading = true;
return super.get(url, options)
.map(res => {
this._globalService.isLoading = false;
return res;
});
}
}
并注册为
bootstrap(App, [
GlobalService,
HTTP_PROVIDERS,
provide(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) => new HttpLoading(backend, defaultOptions, globalService),
deps: [XHRBackend, RequestOptions, GlobalService]
})
])
我正在尝试实现一个应用程序范围的加载栏。因此,当用户单击我的应用程序中的任何 link 并且正在下载数据时,它应该在顶部显示一个加载栏。
像这样:
http://chieffancypants.github.io/angular-loading-bar/
目前,我所做的是添加一个带有布尔值 属性 的全局单例服务,isLoading。在我的主要应用程序组件模板中,我添加了 angular material2 进度条。
<md-progress-bar mode="indeterminate" *ngIf="_globalService.isLoading"></md-progress-bar>
现在,每当我发起一个 http 请求时,我都会在该组件中将该服务的 isLoading 属性 设置为 true。当该请求完成时,我将其设置为 false。
在我目前的情况下,我必须在所有组件中注入服务并手动将 isLoading 设置为 true 或 false。
我想知道有没有什么方法可以捕获我的应用程序中所有 ajax 请求的启动和完成,这样我就可以订阅它,而不必手动处理它。
我可以看到两种方法来完成您想要的事情。第一个是将所有的Http请求抽象为专用服务,第二个是包装Http服务。
服务。无论如何,从您的组件发出 Http 请求可能不是最好的主意,因此更好的方法是将 http-stuff 移动到专用服务并从那里设置 _globalService.isLoading
标志。组件不应该知道这些事情,它只会关心 "getAccounts" 等事情。因此抽象实际的 Http 请求可以使加载指示器标志从组件代码中隐藏。
包装默认 Http 服务。完全有可能将 Http 服务包装到更多层中,从中可以设置 isLoading
标志。在这种情况下,组件代码也不会知道有关加载指示器机制的任何信息。
可能的包装器可能如下所示:
import {Http} from '@angular/http';
import {Injectable} from '@angular/core';
import {GlobalService} from './globalService';
export class HttpLoading extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _globalService: GlobalService ) {
super(backend, defaultOptions);
}
get(url: string, options?: RequestOptionsArgs) {
this._globalService.isLoading = true;
return super.get(url, options)
.map(res => {
this._globalService.isLoading = false;
return res;
});
}
}
并注册为
bootstrap(App, [
GlobalService,
HTTP_PROVIDERS,
provide(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) => new HttpLoading(backend, defaultOptions, globalService),
deps: [XHRBackend, RequestOptions, GlobalService]
})
])