如何在 API 调用后从子组件刷新 Blazor 主 Razor 页面？

Blazor 子组件 API 调用完成后触发/刷新主 .Razor 页面

在 Blazor 中，我们经常会遇到需要根据嵌套子组件中触发的事件或操作（例如 API 调用完成）动态更新主页面布局或刷新内容的情况。

实际案例

考虑以下场景：

• 我们有一个带有多个筛选组件（例如 SearchResults.razor）的主搜索页面。
• 当用户应用筛选器时，我们调用 API 端点来获取修改后的数据。
• 我们希望在 API 调用完成后，在 SearchResults.razor 页面上显示更新后的数据并隐藏加载微调器。

解决方法

为了实现上述解决方案，我们利用以下技术：

1. 实现有状态的服务

我们使用作用域服务（例如 AppState）来存储和共享检索到的 API 数据，以便根页面及其子组件都能访问。

2. 创建“加载”组件

我们定义一个可重用的 Loading.razor 组件，在页面加载时显示微调器，数据准备就绪时显示内容。

3. 使用视图服务

我们创建一个视图服务（例如 WeatherForecastViewService），它管理数据并公开一个 ListChanged 事件，当基础数据更改时触发该事件。

4. 将子组件绑定到视图服务

在子组件中，我们注入视图服务并监控其 ListChanged 事件。检测到更改后，我们使用 StateHasChanged 来刷新组件并显示更新后的数据。

5. 在根页面集中管理状态

在主 SearchResults.razor 页面中，我们：

• 将 Loading 组件绑定到 AppState，以便根据数据可用性显示或隐藏微调器。
• 使用依赖注入注入视图服务。
• 异步获取数据并更新 AppState。
• 侦听视图服务的 ListChanged 事件并调用 StateHasChanged 来触发 UI 更新。

代码片段 (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>

代码片段 (Loading.razor)

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

通过实现这些技术，我们建立了子组件和主页面之间的通信通道，使我们能够触发 UI 更新并在父子关系中保持一致的数据状态。

以上是如何在 API 调用后从子组件刷新 Blazor 主 Razor 页面？的详细内容。更多信息请关注PHP中文网其他相关文章！