Blazor静态SSR项目中交互式组件参数传递及动态更新问题

因为静态SSR页面是非交互式的，直接通过AddCascadingValue注册的固定值无法动态更新，得用可观察状态容器包装UserID，实现登录后的状态同步：

1. 创建可观察的用户状态容器 #

新建类承载UserID并提供状态变化通知：

public class UserState
{
    private string? _userId;
    public string? UserId
    {
        get => _userId;
        set
        {
            if (_userId != value)
            {
                _userId = value;
                OnUserIdChanged?.Invoke(this, EventArgs.Empty);
            }
        }
    }

    public event EventHandler? OnUserIdChanged;
}

2. 注册状态容器和级联值 #

在Program.cs中，将状态容器注册为单例，再作为级联值注入：

builder.Services.AddSingleton<UserState>();
builder.Services.AddCascadingValue(sp => sp.GetRequiredService<UserState>());

3. 登录时更新UserID #

在登录逻辑（比如EditForm的提交处理方法）中，获取UserState实例并更新UserId：

private async Task HandleLogin(LoginModel model)
{
    // 执行登录验证逻辑（如调用API校验账号密码）
    var loginResult = await _authService.Login(model);
    
    if (loginResult.Success)
    {
        // 获取状态容器实例并更新UserId
        var userState = HttpContext.RequestServices.GetRequiredService<UserState>();
        userState.UserId = loginResult.UserId;
        
        // 登录成功后的页面跳转
        NavigationManager.NavigateTo("/dashboard");
    }
}

4. 交互式组件中使用并监听变化 #

在需要获取UserID的交互式组件里，接收级联的UserState，订阅变化事件更新UI：

@implements IDisposable
@rendermode InteractiveServer

<div>当前登录用户ID：@_currentUserId</div>

@code {
    [CascadingParameter]
    private UserState? UserState { get; set; }

    private string? _currentUserId;

    protected override void OnInitialized()
    {
        if (UserState != null)
        {
            _currentUserId = UserState.UserId;
            UserState.OnUserIdChanged += UserState_OnUserIdChanged;
        }
    }

    private void UserState_OnUserIdChanged(object? sender, EventArgs e)
    {
        if (sender is UserState userState)
        {
            _currentUserId = userState.UserId;
            StateHasChanged();
        }
    }

    public void Dispose()
    {
        if (UserState != null)
        {
            UserState.OnUserIdChanged -= UserState_OnUserIdChanged;
        }
    }
}

关键说明 #

• 用状态容器包装UserID，将静态级联值转为可动态更新的引用类型
• 登录时通过请求服务容器获取状态实例，更新后所有订阅的交互式组件都会收到通知
• 交互式组件必须实现IDisposable取消事件订阅，避免内存泄漏

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