Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/30.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 为什么主体观察者在延迟加载的模块中不更新?_Angular_Rxjs_Observable_Subject - Fatal编程技术网

Angular 为什么主体观察者在延迟加载的模块中不更新?

Angular 为什么主体观察者在延迟加载的模块中不更新?,angular,rxjs,observable,subject,Angular,Rxjs,Observable,Subject,在我的angular应用程序中,我有一个应用程序路由文件,其中LayoutComponent作为路径,我的模块作为loadChildren:./pages/home/home.moduleHomeModule。在我的主页模块中,我有一个主页组件,其中有一个加载器。加载程序服务将isLoading作为主题,在拦截器中的请求之前和之后的show和hide方法中分别将isLoading设置为true或false 在控制台日志调试的帮助下,我发现show和hide方法调用成功,但值is subject设

在我的angular应用程序中,我有一个应用程序路由文件,其中LayoutComponent作为路径,我的模块作为loadChildren:./pages/home/home.moduleHomeModule。在我的主页模块中,我有一个主页组件,其中有一个加载器。加载程序服务将isLoading作为主题,在拦截器中的请求之前和之后的show和hide方法中分别将isLoading设置为true或false

在控制台日志调试的帮助下,我发现show和hide方法调用成功,但值is subject设置不正确,因此我无法看到加载程序。我尝试在组件的提供程序数组中注册loader.service,但仍然没有结果

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,那么它会清楚地显示加载程序,它不会通过事件发射器进行设置。试图用行为主体替换主体,但没有成功

结构有点像这样:

    app.module
    |
   layout.component
        |
-----------------------------------
|            |         |    
feature1.module    home.module    feature2.module
                      |
                ----------------
                |       |
               loader.service  home.component.html
                                |
             <div showLoader>

问题得到解决,问题如下:

有多个服务声明,而不是单个服务声明 父模块

使用主题而不是行为主题


请创建stackblitz示例应用程序。*BehaviorSubject无法编辑答案以进行1字符更改