Nello script #207 abbiamo visto come la classe HttpClient di Angular permetta di intercettare la pipeline di esecuzione della richiesta AJAX. In questo script vediamo come sfruttare questa funzionalità per mostrare un messaggio di attesa all'utente mentre la chiamata è in corso. Il meccanismo tramite il quale mostriamo il messaggio è il seguente:
- si intercetta la chiamata HTTP con un interceptor;
- l'interceptor invoca un metodo di un servizio angular per notificare l'inizio della chiamata;
- il servizio invia una notifica ai sottoscrittori di un Subject così da notificarli dell'inizio della chiamata;
- un componente di UI si sottoscrive alle notifiche del servizio e mostra un messaggio;
Lo stesso giro si ripete quando la chiamata termina e bisogna nascondere il messaggio.
La prima cosa da fare è creare il servizio che espone i metodi show e hide invocati dall'interceptor per notificare il servizio dell'inizio e della fine della chiamata AJAX.
export class UIService { waitingUpdates = new Subject<boolean>(); show() { this.waitingUpdates.next(true); } hideWaiting() { this.waitingUpdates.next(false); } }
I metodi show e hide semplicemente inviano delle notifiche a un Subject a cui il component di UI si sottoscrive.
Il secondo passo consiste nel creare l'interceptor che intercetta inizio e fine della chiamata AJAX e invoca i metodi del servizio.
export class WaitingInterceptorService implements HttpInterceptor { constructor(private uiService: UIService) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { this.uiService.showWaiting(); return next .handle(req) .do(event => { if (event instanceof HttpResponse) { this.uiService.hide(); } }) .catch(error => { this.uiService.hide(); return Observable.throw(error || 'Server error'); }); } }
Il terzo passo consiste nel creare un component che si sottoscrive alle notifiche inviate dal Subject del servizio e mostra il messaggio di operazione in corso.
@Component({ selector: 'app-waiting', template: '<div *ngIf="show">Attendere</div>' }) export class WaitingComponent implements OnInit, OnDestroy { show = false; updatesSubscription: Subscription; constructor(private uiHandlerService: UIHandlerService) { } ngOnInit() { this.updatesSubscription = this.uiHandlerService.waitingUpdates.subscribe(c => { this.show = c; }); } ngOnDestroy() { this.updatesSubscription.unsubscribe(); } }
L'ultimo passo consiste nel mettere il component nella pagina principale così da essere visibile in tutta l'applicazione.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestione ciclo di vita in .NET Aspire
Evitare memory leaks nelle closure JavaScript
Selettore CSS :has() e i suoi casi d'uso avanzati
Integrare SQL Server in un progetto .NET Aspire
Integrare un servizio esterno con .NET Aspire
Creare una libreria CSS universale: Clip-path
Referenziare un @layer più alto in CSS
Eseguire script pre e post esecuzione di un workflow di GitHub
Utilizzare il metodo Index di LINQ per scorrere una lista sapendo anche l'indice dell'elemento
Combinare Container Queries e Media Queries
Centralizzare gli endpoint AI Foundry con Azure API Management
Disabilitare le run concorrenti di una pipeline di Azure DevOps
I più letti di oggi
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!