Question

我正在使用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）。当我单击医生列表中的编辑按钮时，它将打开医生编辑组件，作为医生列表上的弹出窗口。但是，在设置了公共加载程序后，我得到了错误（即ExpressionChangedAfterItHaHasBeenCheckedError：检查后表达式已更改。上一个值：'ngIf：false'。当前值：'ngIf：true'。”）在打开弹出窗口时。加载程序组件中的方法。但是，它不起作用。我该如何解决？

Answer 1

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

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

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

}

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

使用Http Interceptor的显示加载器

1 个答案: