【发布时间】:2019-08-09 18:04:53
【问题描述】:
在我的 Angular 应用程序中,我有一个 app-routing 文件,路径为 LayoutComponent,我的模块为 loadChildren: "./pages/home/home.module#HomeModule"。在我的主模块中,我有一个主组件,其中有一个加载器<app-loader></app-loader>。加载器服务将isLoading 设置为Subject,在拦截器中的请求之前和之后分别在show() 和hide() 方法中设置true 或false。
在控制台日志调试的帮助下,我发现成功调用了 show 和 hide 方法,但是主题的值设置不正确,因此我无法看到加载程序。我尝试在组件的提供程序数组中注册loader.servie,但仍然没有结果
app-routing:
{
path: "home",
loadChildren: "./pages/home/home.module#HomeModule"
},
home.module:
providers: [
LoaderService,
{ provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }
]
loader.service
export class LoaderService {
isLoading = new Subject<boolean>();
show() {
console.log('show');
this.isLoading.next(true);
}
hide() {
console.log('hide');
this.isLoading.next(false);
}
}
loading.interceptor.
export class LoaderInterceptor implements HttpInterceptor {
constructor(public loaderService: LoaderService, private adalService: AdalService) {
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.loaderService.show();
return next.handle(req).pipe(
finalize(() => this.loaderService.hide())
);
}
}
loading.component.html
<div *ngIf="isLoading | async" class="overlay">
loading.component.ts
isLoading: Subject<boolean> = this.loaderService.isLoading;
如果我在 loading.component 中手动将 isLoading 设置为 true,那么它会清楚地显示加载器,它不会通过事件发射器进行设置。试图用 BehaviourSubject 替换 Subject 但没有成功
结构有点像这样:
app.module
|
layout.component
|
-----------------------------------
| | |
feature1.module home.module feature2.module
|
----------------
| |
loader.service home.component.html
|
<div showLoader>
【问题讨论】:
-
请创建 stackblitz 示例应用程序。
标签: angular rxjs observable subject