我对 Angular 还很陌生,所以我需要展示一个spinner
每次 http 请求完成时。
我有很多组件:
<component-one></component-one>
<component-two></component-two>
<component-three></component-three>
<component-n></component-n>
每个都有一个获取或保存一些数据的 http 请求,因此当发出 http 请求时,我想显示我的<loading></loading>
所以我认为通过 http 请求将我的加载组件注入到每个其他组件中并不是一个好的做法。我可以添加一个过滤器或来自角度的东西来允许我加载<loading>
组件自动出现在每个有http请求的组件中?
另外,当 http 请求完成时,我想显示一条消息,例如“完成”或其他内容。
如果有人能为我提供解决方案,我将非常感激,ty。
UPD: plunker。看一眼app.ts
。抱歉将所有内容都放在一个文件中。
在 Angular 4.3 中,有一个新的 HttpClientModule 支持拦截器。主要思想是有这样的东西:
@Injectable()
export class LoadingIndicatorService {
private _loading: boolean = false;
get loading(): boolean {
return this._loading;
}
onRequestStarted(): void {
this._loading = true;
}
onRequestFinished(): void {
this._loading = false;
}
}
然后您只需将 Christopher 的答案中的逻辑应用到您的 HttpInterceptor 即可。
您唯一应该注意的是同时请求。例如,可以通过为每个请求生成唯一标识符并将其存储在某处直到请求完成来解决此问题。
然后你就可以拥有一个全局的LoadingIndicator
注入的组件LoadingIndicatorService
.
有关 HttpClientModule 的更多详细信息:https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)