MS Blazor如何在OnClick事件后实现不同razor页面间的赋值

Blazor跨组件同步状态最适合该场景的方案是全局状态容器，实现步骤如下：

步骤1：创建共享状态服务 #

首先新建用于存储共享图片路径的服务，内置状态变更通知事件：

public class SharedImageState
{
    // 存储当前选中的图片路径
    public string CurrentImagePath { get; private set; }

    // 状态变更事件，供订阅的组件触发重渲染
    public event Action OnStateChanged;

    // 对外暴露的更新图片路径方法
    public void UpdateImagePath(string path)
    {
        CurrentImagePath = path;
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnStateChanged?.Invoke();
}

步骤2：注册服务到依赖注入容器 #

在Program.cs中将该服务注册为单例（Blazor WebAssembly全局单例即可满足需求）：

builder.Services.AddSingleton<SharedImageState>();

步骤3：MainLayout绑定图片点击事件 #

修改MainLayout.razor，注入服务后给图片A、B绑定点击触发的更新逻辑：

@inject SharedImageState ImageState
@inherits LayoutComponentBase

<!-- 其他布局代码 -->
<div class="image-area">
    <!-- 图片A -->
    <img src="path/to/a.png" @onclick="() => SelectImage("path/to/a.png")" alt="图片A" />
    <!-- 图片B -->
    <img src="path/to/b.png" @onclick="() => SelectImage("path/to/b.png")" alt="图片B" />
</div>

<div class="main-content">
    @Body
</div>

@code {
    private void SelectImage(string imgPath)
    {
        ImageState.UpdateImagePath(imgPath);
    }
}

步骤4：NavMenu订阅状态变更 #

修改NavMenu.razor，订阅状态变更事件，自动触发重渲染更新图片C：

@inject SharedImageState ImageState
@implements IDisposable

<!-- 其他导航菜单代码 -->
<div class="nav-image-block">
    <!-- 图片C路径绑定共享状态值 -->
    <img src="@ImageState.CurrentImagePath" alt="图片C" />
</div>

@code {
    protected override void OnInitialized()
    {
        // 订阅状态变更，状态更新时触发当前组件重渲染
        ImageState.OnStateChanged += StateHasChanged;
        // 可选：初始化时设置默认图片
        ImageState.UpdateImagePath("path/to/default.png");
    }

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

如果不想新增服务，也可以用**级联参数（CascadingParameter）**实现：在MainLayout里把当前图片路径和更新方法作为级联值向下传递，NavMenu接收该级联值即可，但是如果组件层级较深，维护成本会比状态容器高。

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