Bagaimana untuk Menyegarkan Halaman Pisau Cukur Utama Blazor daripada Komponen Kanak-kanak Selepas Panggilan API?

Cetus/segarkan halaman .Razor utama selepas panggilan API subkomponen Blazor selesai

Dalam Blazor, kami sering menghadapi situasi di mana kami perlu mengemas kini reka letak halaman utama secara dinamik atau memuat semula kandungan berdasarkan peristiwa atau tindakan yang dicetuskan dalam komponen anak bersarang (seperti penyiapan panggilan API).

Kes sebenar

Pertimbangkan senario berikut:

• Kami mempunyai halaman carian utama dengan berbilang komponen penapis (cth. SearchResults.razor).
• Apabila pengguna menggunakan penapis, kami memanggil titik akhir API untuk mendapatkan data yang diubah suai.
• Kami mahu memaparkan data yang dikemas kini dan menyembunyikan pemutar pemuatan pada halaman SearchResults.razor selepas panggilan API selesai.

Penyelesaian

Untuk mencapai penyelesaian di atas, kami menggunakan teknologi berikut:

1. Laksanakan perkhidmatan stateful

Kami menggunakan perkhidmatan berskop (seperti AppState) untuk menyimpan dan berkongsi data API yang diambil supaya ia boleh diakses oleh halaman akar dan subkomponennya.

2. Cipta komponen "memuatkan"

Kami mentakrifkan komponen Loading.razor boleh guna semula yang memaparkan pemutar apabila halaman dimuatkan dan kandungan apabila data sedia.

3. Gunakan perkhidmatan paparan

Kami mencipta perkhidmatan paparan (cth. WeatherForecastViewService) yang mengurus data dan mendedahkan peristiwa ListChanged yang dicetuskan apabila data asas berubah.

4. Ikat subkomponen pada perkhidmatan paparan

Dalam komponen anak, kami menyuntik perkhidmatan paparan dan memantau acara ListChangednya. Selepas perubahan dikesan, kami menggunakan StateHasChanged untuk menyegarkan semula komponen dan memaparkan data yang dikemas kini.

5. Urus status pada halaman akar

Dalam halaman SearchResults.razor utama kami:

• Ikat komponen Memuatkan ke AppState untuk menunjukkan atau menyembunyikan pemutar berdasarkan ketersediaan data.
• Suntikan perkhidmatan paparan menggunakan suntikan kebergantungan.
• Dapatkan data dan kemas kini AppState secara tidak segerak.
• Dengar acara ListChanged perkhidmatan lihat dan panggil StateHasChanged untuk mencetuskan kemas kini UI.

Coretan kod (SearchResults.razor)

<code class="language-csharp">@code {
    [Inject] WeatherForecastViewService viewService { get; set; }

    // API 调用完成后赋值为 true
    public bool IsLoaded { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GetForecastsAsync();
        this.viewService.ListChanged += this.OnListChanged;
    }

    private async Task GetForecastsAsync()
    {
        // 代码省略，为简洁起见
    }

    private void OnListChanged(object sender, EventArgs e)
        => this.InvokeAsync(this.StateHasChanged);

    public void Dispose()
    {
        this.viewService.ListChanged -= this.OnListChanged;
    }
}</code>

Coretan kod (Loading.razor)

<code class="language-csharp">@if (this.IsLoaded)
{
    @this.ChildContent
}
else
{
    // 显示加载微调器
}</code>

Dengan melaksanakan teknik ini, kami mewujudkan saluran komunikasi antara komponen kanak-kanak dan halaman utama, membolehkan kami mencetuskan kemas kini UI dan mengekalkan keadaan data yang konsisten merentas perhubungan ibu bapa-anak.

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