Bagaimana untuk Menyegarkan Halaman Pisau Cukur Utama daripada Sub-Komponen Selepas Panggilan API?

Menyegarkan Halaman Pisau Cukur Utama daripada Sub-Komponen Selepas Panggilan API

Panduan ini menangani cabaran mengemas kini halaman Razor utama daripada sub-komponennya berikutan panggilan API, khususnya memfokuskan pada mengekalkan keadaan pemuatan semasa pengambilan data. Penyelesaian itu memanfaatkan perkhidmatan berskop dan kaedah InvokeAsync(StateHasChanged) Blazor.

Masalah: Carian awal memaparkan pemutar pemuatan, tetapi aplikasi penapis seterusnya gagal mencetuskannya.

Penyelesaian: Penyelesaian ini menggunakan perkhidmatan berskop untuk mengurus keadaan aplikasi dan menyelaraskan kemas kini antara komponen.

Langkah Pelaksanaan:

1. Perkhidmatan Berskop (AppState): Cipta perkhidmatan berskop (cth., AppState) untuk menjejaki sama ada data API telah diterima. Perkhidmatan ini akan memegang bendera boolean, seperti API_Data_Received.

2. Penapisan Sub-Komponen (FilterRazorComponent): Apabila penapis digunakan dalam subkomponen:

   • Tetapkan AppState.API_Data_Received kepada false, menandakan keperluan untuk menyegarkan semula data.
   • Navigasi ke halaman SearchResults.razor, lulus mana-mana parameter penapis yang diperlukan. Pertimbangkan untuk menggunakan parameter navigasi untuk menghantar data dengan cekap.

3. Halaman Utama (SearchResults.razor):

   • Suntikan perkhidmatan AppState.
   • Dalam OnInitializedAsync(), semak AppState.API_Data_Received secara tak segerak.
   • Jika AppState.API_Data_Received ialah false, paparkan penunjuk pemuatan dan mulakan panggilan API.
   • Apabila panggilan API berjaya diselesaikan, tetapkan AppState.API_Data_Received kepada true dan panggil InvokeAsync(StateHasChanged) untuk memuat semula UI, mengalih keluar penunjuk pemuatan dan memaparkan hasil yang dikemas kini.

Pendekatan ini memastikan bahawa halaman SearchResults.razor utama secara konsisten mencerminkan keadaan pemuatan dan mengemas kini kandungannya selepas setiap panggilan API yang dicetuskan oleh interaksi subkomponen. Penggunaan perkhidmatan berskop menyediakan cara yang bersih dan cekap untuk mengurus keadaan aplikasi dan mencetuskan kemas kini UI.

Atas ialah kandungan terperinci Bagaimana untuk Menyegarkan Halaman Pisau Cukur Utama daripada Sub-Komponen Selepas Panggilan API?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!