【问题标题】:Why does the subject observer not update when inside a lazy loaded module?为什么在延迟加载的模块中主题观察者不更新?
【发布时间】:2019-08-09 18:04:53
【问题描述】:

在我的 Angular 应用程序中,我有一个 app-routing 文件,路径为 LayoutComponent,我的模块为 loadChildren: "./pages/home/home.module#HomeModule"。在我的主模块中,我有一个主组件,其中有一个加载器<app-loader></app-loader>。加载器服务将isLoading 设置为Subject,在拦截器中的请求之前和之后分别在show()hide() 方法中设置truefalse

在控制台日志调试的帮助下,我发现成功调用了 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


【解决方案1】:

问题已解决,以下是问题:

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

  • 使用了主题而不是 BehaviourSubject。

【讨论】:

  • *BehaviorSubject(无法编辑答案以更改 1 个字符)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-02-01
  • 2018-05-22
  • 2021-06-26
  • 1970-01-01
  • 2020-08-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多