Blazor 跨页面传递多组实时数据及观察者模式关联问题咨询

报错原因 #

你在发送页声明的STest是页面级实例，仅存在于当前页面的上下文范围内，页面跳转、实例销毁或其他用户访问接收页时，都无法访问到这个独立实例，自然会提示变量不存在。

实现方案 #

根据你的场景（单用户跨页面/多用户跨设备共享）可以选择以下两种方案： #

方案1：单用户/Blazor Server 多用户同服务端场景（用共享状态服务实现观察者模式）

1. 新建全局共享的数据服务，将Subject封装在服务内：

using System.Reactive.Subjects;

public class SharedDataService
{
    // 若需要新订阅者能收到最新的历史值，可替换为BehaviorSubject
    private readonly Subject<string> _dataSubject = new();
    public IObservable<string> DataChanged => _dataSubject.AsObservable();

    // 发送数据的方法
    public void PushData(string inputValue)
    {
        _dataSubject.OnNext(inputValue);
    }
}

若需要传递多组不同字段的数据，只需自定义数据实体类替换Subject<string>的泛型参数即可。

2. 在Program.cs中注册服务：
   • 多用户全局共享：builder.Services.AddSingleton<SharedDataService>();
   • 仅当前用户跨页面共享：builder.Services.AddScoped<SharedDataService>();
3. 发送页注入服务，录入数据后调用推送方法：

@inject SharedDataService DataService

<!-- 录入框代码略 -->
@code {
    private string _inputValue;
    private void Submit()
    {
        DataService.PushData(_inputValue);
    }
}

4. 接收页注入服务，订阅数据变更，实现实时展示：

@inject SharedDataService DataService
@implements IDisposable

<p>只读展示内容：@_displayValue</p>

@code {
    private string _displayValue;
    private IDisposable _subscription;

    protected override void OnInitialized()
    {
        // 订阅数据变更，收到新值后更新UI
        _subscription = DataService.DataChanged.Subscribe(newVal => 
        {
            _displayValue = newVal;
            InvokeAsync(StateHasChanged);
        });
    }

    // 页面销毁时取消订阅，避免内存泄漏
    public void Dispose() => _subscription?.Dispose();
}

方案2：Blazor WASM 多用户跨设备场景

需要借助SignalR实现多客户端实时同步，服务端做数据中转：

1. 服务端搭建SignalR集线器，接收发送端数据，推送给所有订阅的接收端
2. 发送页连接集线器，录入数据后调用集线器方法推送
3. 接收页连接集线器，监听数据推送事件，收到数据后更新UI，展示组件设为只读即可。

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