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

Memuatkan semula halaman Razor utama daripada sub-komponen dalam Blazor selepas panggilan API memerlukan pendekatan pengurusan keadaan. Mekanisme pengesanan perubahan terbina dalam Blazor tidak akan mengemas kini komponen induk secara automatik melainkan sifat datanya berubah. Begini cara untuk melaksanakan penyelesaian teguh menggunakan corak keadaan/pemberitahuan:

Untuk mencapai matlamat ini, kami akan menggunakan perkhidmatan untuk mengurus keadaan aplikasi, menyuntiknya ke dalam halaman utama dan sub-komponennya. Subkomponen akan mencetuskan pemberitahuan dalam perkhidmatan ini selepas panggilan API, menggesa kemas kini UI.

1. Buat Perkhidmatan Pengurusan Negeri:

Perkhidmatan ini akan menyimpan data dan mekanisme untuk memberitahu pelanggan tentang perubahan. Kami akan menggunakan EventCallback untuk tujuan ini.

<code class="language-csharp">using Microsoft.AspNetCore.Components;

public class StateService
{
    public event Action StateChanged;

    // Your application state data
    public string DataFromAPI { get; set; } = "";

    public void NotifyStateChanged()
    {
        StateChanged?.Invoke();
    }
}</code>

2. Suntikan Perkhidmatan ke dalam Komponen:

Suntikan StateService ke dalam halaman Razor utama anda dan sub-komponen yang membuat panggilan API.

<code class="language-csharp">@inject StateService StateService // In both the main page and sub-components</code>

3. Panggilan API dan Kemas Kini Negeri dalam Sub-Komponen:

Dalam subkomponen anda, selepas panggilan API berjaya, kemas kini data StateService dan maklumkan perubahan itu.

<code class="language-csharp">@code {
    protected override async Task OnInitializedAsync()
    {
        string apiData = await FetchDataFromAPI(); // Your API call
        StateService.DataFromAPI = apiData;
        StateService.NotifyStateChanged();
    }

    // ... your API call method ...
    private async Task<string> FetchDataFromAPI()
    {
        // Your API call logic here
        return await Task.FromResult("Data from API");
    }
}</code>

4. Kemas kini Halaman Pisau Cukur Utama:

Dalam halaman Pisau Cukur utama anda, paparkan data daripada StateService. Blazor akan memaparkan semula bahagian ini secara automatik apabila StateService.DataFromAPI berubah kerana ia merupakan sifat komponen.

<code class="language-csharp">@page "/"
@inject StateService StateService

<h1>Main Page</h1>
<p>@StateService.DataFromAPI</p>

<MySubComponent /></code>

Pertimbangan Penting:

• Pengendalian Ralat: Sertakan pengendalian ralat yang betul dalam panggilan API anda dalam sub-komponen.
• Keadaan Kompleks: Untuk aplikasi yang lebih kompleks, pertimbangkan untuk menggunakan pustaka pengurusan keadaan yang lebih canggih seperti Fluxor atau Redux.
• Operasi Asynchronous: Pastikan panggilan API anda dikendalikan secara tak segerak menggunakan async dan await untuk mengelakkan sekatan urutan UI.

Corak ini memastikan bahawa perubahan dalam mana-mana subkomponen akan mencetuskan kemas kini dalam halaman utama dengan mengemas kini keadaan kongsi dan memberitahu sistem perubahan itu. Halaman utama dipaparkan semula secara automatik kerana ia terikat pada data perkhidmatan. Ini mengelakkan panggilan manual ke StateHasChanged dalam komponen induk, yang biasanya tidak digalakkan untuk jenis kemas kini ini.

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