httpsリクエストが終了すると通知するロード画面を作成しようとしていますが、next(false)を使用してサブスクライバーに通知すると通知されません
Loading.service.ts
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class LoadingService implements HttpInterceptor {
loading$ = new BehaviorSubject<boolean>(true);
activeRequests: number = 0
constructor() { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (this.activeRequests >= 0) {
this.activeRequests++
this.loading$.next(true)
}
return next.handle(req).pipe(
finalize(() => {
this.activeRequests--;
this.loading$.next(true)
if (this.activeRequests === 0) {
this.loading$.next(false)
}
})
)
}
}
Loading.component.ts
import { AfterViewInit, ChangeDetectorRef, Component, ComponentRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { LoadingService } from 'src/app/services/loading.service';
@Component({
selector: 'app-loading',
templateUrl: './loading.component.html',
styleUrls: ['./loading.component.css']
})
export class LoadingComponent implements OnDestroy, OnInit {
loadingSubscription: Subscription;
constructor(
public loadingService: LoadingService,
private elementRef: ElementRef,
private changeDetectorRef: ChangeDetectorRef
) {
}
ngOnInit(): void {
this.elementRef.nativeElement.style.display = 'none'
this.loadingSubscription = this.loadingService.loading$
.subscribe(
(status: boolean) => {
console.log('status', status)
this.elementRef.nativeElement.style.display = status ? 'block' : 'none'
this.changeDetectorRef.detectChanges()
}, (err) => {
console.log('err', err)
}
)
}
ngOnDestroy(): void {
console.log('unsubcribe')
this.loadingSubscription.unsubscribe()
}
}
無視:あなたの投稿はほとんどコードのようです。詳細を追加してください。投稿のほとんどがコードのようです。
インターセプターを2回提供し、loading.service.tsからインターセプターを削除したために問題が発生しました。詳細については正しい場所ではなかったため、これらの変更を確認できますhttps://github.com/FrancoRodao/administrador-empleados-frontend/pull / 1 / commits / 23d65d6926a764bc37c1e32acb269f3f8e7c15c8
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加