使用 Http 拦截器的显示加载器答案

【问题标题】：Display loader using Http Interceptor使用 Http 拦截器的显示加载器
【发布时间】：2019-09-23 22:46:30
【问题描述】：

我正在研究 Angular 7，我想在加载数据/页面时使用 Http Interceptor 显示加载器。我尝试了不同的方法，但在加载数据/页面时它没有显示加载器。

我创建了一个 http 拦截器服务类“interceptor.service.ts”来获取每个 http 请求，并创建了一个加载器服务来管理加载器“loader.service.ts”的隐藏/显示，然后我创建了加载器组件来检索数据，即从加载器服务“loader.component.ts”中隐藏/显示

loader.service.ts

@Injectable()
export class LoaderService {

    isLoading:BehaviorSubject<boolean>; 

    constructor() {
            this.isLoading = new BehaviorSubject(false);
    }

    show() {
            this.isLoading.next(true);
    }
    hide() {
        this.isLoading.next(false);
    }
}

interceptor.service.ts

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loaderService.show();
    return next.handle(req).pipe(
        finalize(() => this.loaderService.hide())
    );
}

loader.component.html

<div *ngIf="isLoading" class="overlay">
     <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value">
     </mat-progress-spinner>
</div>

loader.component.ts

isLoading:any

constructor(public loaderService: LoaderService) {


}

ngOnInit(){
    this.loaderService.isLoading.subscribe(data=>{
        this.isLoading=data;
    })
}

一切正常。我有两个页面（医生列表，即组件 1，医生编辑，即组件 2）。当我单击医生列表中的编辑按钮时，它会在医生列表中打开医生编辑组件作为弹出窗口。但是，在设置了通用加载器后，我在打开弹出窗口时遇到了错误（即 ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后发生了变化。以前的值：'ngIf：false'。当前值：'ngIf：true'。“）。我试过 ngafterViewInit加载器组件中的方法。但是，它不起作用。我该如何解决？

【问题讨论】：

延迟加载是什么意思？
上面的代码看起来不错，这可能是您（懒惰）加载组件/服务的方式的问题。
@AsimHashmi 如果我们在一页上有 4 个选项卡/组件，那么它只会加载选定的选项卡/组件
@P.Moloney 它在每个 http 请求上调用 http 服务，但无法从加载器服务获取更新的值
也许如果您提供您的 ngModel 和/或问题的最小复制，我可以提供更多帮助。我建议您确保 LoaderComponent 和 LoaderService 都没有被延迟加载，或者在需要时可供拦截器使用。

标签： angular typescript

【解决方案1】：

constructor(private loaderService: LoaderService, private ref: ChangeDetectorRef{}

    ngOnInit(){
        this.loaderService.isLoading.subscribe(data=>{
             this.isLoading=data;
        })
    }

    ngAfterViewChecked(): void {
        this.ref.detectChanges();
    }

}

在 AfterViewChecked 中使用此 ChangeDetectorRef 可能会解决您的问题。

【讨论】：