Blazor：如何实现子组件修改状态后父组件实时更新购物篮计数

要让Header组件实时感知StateContainer的状态变化，按以下步骤修改即可：

1. 在Header组件中注入StateContainer并订阅状态变化事件 #

@inject StateContainer StateContainer
@implements IDisposable

<div>@StateContainer.basket.Count</div>

@code {
    protected override void OnInitialized()
    {
        // 订阅状态变更事件
        StateContainer.OnChange += HandleStateChange;
    }

    private void HandleStateChange()
    {
        // 通知组件重新渲染，更新UI显示
        StateHasChanged();
    }

    public void Dispose()
    {
        // 组件销毁时取消订阅，避免内存泄漏
        StateContainer.OnChange -= HandleStateChange;
    }
}

关键逻辑说明 #

• 依赖注入：通过@inject指令获取已注册的Singleton实例，无需手动创建对象。
• 事件订阅：在组件初始化阶段订阅OnChange事件，确保能监听购物篮的状态变更。
• UI更新触发：当Dialog中调用NotifyStateChanged()触发事件时，执行StateHasChanged()通知Blazor重新渲染Header组件，展示最新的购物篮数量。
• 内存泄漏防护：实现IDisposable接口，在组件销毁时移除事件订阅，避免无用的引用残留。

内容的提问来源于stack exchange，提问作者bilpor