Blazor中在Singleton服务内使用IJSRuntime的问题求助

核心问题 #

IJSRuntime是作用域（Scoped）服务，与用户的Blazor连接绑定，无法直接注入到生命周期更长的单例（Singleton）服务中。以下是两种无需修改服务生命周期的解决方案：

方案一：通过IServiceScopeFactory临时创建作用域 #

在单例服务中注入服务作用域工厂，需要调用JS函数时临时创建作用域，从中获取IJSRuntime实例：

1. 修改单例服务构造函数 #

private readonly IServiceScopeFactory _scopeFactory;

public MyService(IServiceScopeFactory scopeFactory)
{
    _scopeFactory = scopeFactory;
}

2. 调用JS函数时创建作用域 #

使用using语句确保作用域自动释放，避免内存泄漏：

public async Task ExecuteJavaScript()
{
    using var scope = _scopeFactory.CreateScope();
    var jsRuntime = scope.ServiceProvider.GetRequiredService<IJSRuntime>();
    
    // 替换为你的JS函数名和参数
    await jsRuntime.InvokeVoidAsync("yourJsFunction", "参数1", "参数2");
}

关键注意点 #

• 必须在用户连接上下文内调用该方法（比如组件事件触发的服务逻辑），如果在无用户上下文的后台线程执行，会因无法获取有效IJSRuntime实例报错。

方案二：通过组件中转调用 #

让单例服务触发事件，由已注入IJSRuntime的组件响应事件并执行JS函数，适合需要关联UI上下文的场景：

1. 单例服务定义事件 #

public event Func<Task>? JsCallRequested;

public async Task TriggerJsExecution()
{
    JsCallRequested?.Invoke();
}

2. 组件订阅事件并执行JS #

@inject IJSRuntime JsRuntime
@inject MyService MyService
@implements IDisposable

@code {
    protected override void OnInitialized()
    {
        MyService.JsCallRequested += HandleJsCall;
    }

    private async Task HandleJsCall()
    {
        await JsRuntime.InvokeVoidAsync("yourJsFunction");
    }

    public void Dispose()
    {
        MyService.JsCallRequested -= HandleJsCall;
    }
}

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