Wie aktualisiere ich eine Razor-Hauptseite aus Unterkomponenten nach einem API-Aufruf in Blazor?

Das Aktualisieren einer Razor-Hauptseite aus Unterkomponenten in Blazor nach einem API-Aufruf erfordert einen Zustandsverwaltungsansatz. Der integrierte Änderungserkennungsmechanismus von Blazor aktualisiert die übergeordnete Komponente nicht automatisch, es sei denn, ihre Dateneigenschaften ändern sich. So implementieren Sie eine robuste Lösung mithilfe eines Status-/Benachrichtigungsmusters:

Um dies zu erreichen, verwenden wir einen Dienst zur Verwaltung des Anwendungsstatus und fügen ihn sowohl in die Hauptseite als auch in ihre Unterkomponenten ein. Die Unterkomponenten lösen in diesem Dienst nach API-Aufrufen Benachrichtigungen aus und veranlassen so Aktualisierungen der Benutzeroberfläche.

1. Erstellen Sie einen Statusverwaltungsdienst:

Dieser Dienst speichert die Daten und einen Mechanismus, um Abonnenten über Änderungen zu informieren. Zu diesem Zweck verwenden wir ein EventCallback.

<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. Injizieren Sie den Dienst in Komponenten:

Fügen Sie das StateService sowohl in Ihre Razor-Hauptseite als auch in die Unterkomponenten ein, die API-Aufrufe durchführen.

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

3. API-Aufruf und Statusaktualisierung in der Unterkomponente:

Aktualisieren Sie in Ihrer Unterkomponente nach einem erfolgreichen API-Aufruf die Daten von StateService und benachrichtigen Sie die Änderung.

<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. Aktualisieren Sie die Razor-Hauptseite:

Zeigen Sie auf Ihrer Razor-Hauptseite die Daten von StateService an. Blazor rendert diesen Abschnitt automatisch neu, wenn StateService.DataFromAPI sich ändert, da es sich um eine Eigenschaft einer Komponente handelt.

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

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

<MySubComponent /></code>

Wichtige Überlegungen:

• Fehlerbehandlung: Integrieren Sie eine ordnungsgemäße Fehlerbehandlung in Ihre API-Aufrufe innerhalb der Unterkomponenten.
• Komplexer Zustand: Für komplexere Anwendungen sollten Sie die Verwendung einer komplexeren Zustandsverwaltungsbibliothek wie Fluxor oder Redux in Betracht ziehen.
• Asynchrone Vorgänge: Stellen Sie sicher, dass Ihre API-Aufrufe asynchron verarbeitet werden, indem Sie async und await verwenden, um ein Blockieren des UI-Threads zu verhindern.

Dieses Muster stellt sicher, dass Änderungen in einer Unterkomponente eine Aktualisierung auf der Hauptseite auslösen, indem der freigegebene Status aktualisiert und das System über die Änderung benachrichtigt wird. Die Hauptseite wird automatisch neu gerendert, da sie an die Daten des Dienstes gebunden ist. Dadurch werden manuelle Aufrufe von StateHasChanged in der übergeordneten Komponente vermieden, von denen bei dieser Art von Aktualisierung im Allgemeinen abgeraten wird.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich eine Razor-Hauptseite aus Unterkomponenten nach einem API-Aufruf in Blazor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!