Início / coding / Perguntas / 78445135
Accepted
Razvan Zamfir
Asked: 2024-05-08 05:22:22 +0800 CST

O que causa a falha na exibição deste girador de carregamento Angular 16?

  • 772

Estou criando um "spinner de carregamento" em nível de aplicativo com a ajuda do HttpInterceptorAngular 16.

Em app\services\interceptor.service.tseu tenho:

import { Injectable } from '@angular/core';
import { HttpInterceptor,HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { SpinnerService } from './spinner.service';


@Injectable({
  providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {
  constructor(private spinnerService: SpinnerService) { }

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

Em app\services\spinner.service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SpinnerService {
  private spinnerCounter = new BehaviorSubject<number>(0);
  spinnerCounter$ = this.spinnerCounter.asObservable();

  public show() {    
    this.spinnerCounter.next(this.spinnerCounter.value + 1);
  }

  public hide() {    
    this.spinnerCounter.next(this.spinnerCounter.value - 1);
  }
}

Eu importei o spinnerServicein app\app.component.tse adicionei o spinner ao arquivo app\app.component.html.

<app-loading-spinner *ngIf="spinnerService.spinnerCounter$ | async"></app-loading-spinner>

Stackblitz

O app-loading-spinnercomponente nunca é exibido entre solicitações HTTP. O que estou fazendo de errado e como posso corrigir esse problema?

javascript

1 respostas

  1. Best Answer

    Você deve especificar que está fornecendo um HttpInterceptorem seus AppModuleprovedores; caso contrário, ele não fará nada por si só:

    @NgModule({
  providers: [
    BypassSanitizePipe,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

    Aqui está o StackBlitz atualizado:

    https://stackblitz.com/edit/stackblitz-starters-lhqg8v?file=src%2Fapp%2Fapp.module.ts

    Também gostaria de abordar algo que vi no seu código, ao clicar em um cartão de filme, este trecho de código é executado:

    public goToMovieDetails() {
  let movie_url = `/movie/${this.movie.id}`
  window.open(movie_url, '_self');
}

    Esta parece uma escolha estranha, pois está causando muitos efeitos colaterais, pode haver um motivo que não estou vendo aqui, mas por precaução, compartilharei o fato de que é possível redirecionar usando o RouterServiço angular :

    constructor(private movieService: MovieService, private router: Router) { }

public goToMovieDetails() {
  let movie_url = `/movie/${this.movie.id}`
  this.router.navigate([movie_url]);
}

    Isso evitaria qualquer inconveniente como recarregar o aplicativo Angular.

    Espero que isto ajude.

    • 2

relate perguntas