1

在我的项目中，我有多个模块，并且我创建了一个在实用程序模块中可用的共享服务。服务如下：

@Injectable()
export class ProgressloaderService {
  private isLoading: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  constructor() { }
  showLoader(){
    this.setIsLoading(true);
  }

  hideLoader(){
    this.setIsLoading(false);
  }

  getIsLoading(): Observable<boolean> {
    return this.isLoading.asObservable();
  }

  setIsLoading(val : boolean): void {
    this.isLoading.next(val);
  }
}

该应用程序的地图如下： 应用流程

实用程序模块如下：实用模块

在 Home 模块的根组件中放置以下代码：-

在组件的 ts 文件中完成以下代码：

  ngOnInit(): void {
            this.loaderService.getIsLoading().subscribe((isLoading) => {
                this.isLoading = isLoading;
            });

        }

在 Html 文件中，代码如下：

  <app-loader *ngIf="isLoading"></app-loader>

当在只有一个根模块的单模块应用程序中实现时，上述事情工作正常，但在这个多模块应用程序中，事情不起作用。

现在其他模块中的组件将根据需要加载到该组件中。

在当前应用程序中，如果我在每个子模块的根组件中添加可观察代码，但这将需要在每个子模块中添加 html 拦截器。

所以我需要一个解决方案，它可以帮助我在实用程序模块中只有一个 HTML 拦截器，而在应用程序的根模块中只需要一个 observable

4

0 回答 0