如何解决JSRuntime为Null的问题？Blazor组件调用方法抛出异常

异常Value cannot be null. (Parameter 'jsRuntime')的核心原因是：手动实例化Component2时，绕过了Blazor的依赖注入系统，导致Component2中的IJSRuntime未被初始化。直接用new Component2()创建对象，Blazor不会自动为这个实例注入依赖项，所以JSRuntime字段始终为null。

提供两种可行修复方式，优先推荐第一种：

方式1：通过组件标签渲染Component2（推荐） #

Blazor仅会为框架渲染的组件实例自动处理依赖注入。修改Component1代码，用组件标签声明Component2，再通过@ref获取实例：

@inject IJSRuntime JSRuntime

<button class="btn btn-sm btn-outline-dark ms-2" @onclick="(async()=> await comp.Function(data))">
    show
</button>

<!-- 用组件标签让Blazor管理组件实例及依赖注入 -->
<Component2 @ref="comp" />

@code{
    // 通过@ref获取框架创建的组件实例
    private Component2 comp;
    private List<string> data = new List<string>(); // 确保data已初始化
}

Component2代码无需改动，Blazor会自动为其注入IJSRuntime。

方式2：手动传递IJSRuntime实例（特殊场景使用） #

如果必须手动实例化Component2，需通过构造函数显式传递IJSRuntime：

先修改Component2，添加构造函数接收IJSRuntime：

@code{
    private readonly IJSRuntime _jsRuntime;

    // 构造函数注入IJSRuntime
    public Component2(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task Function(List<string> data)
    {
        await _jsRuntime.InvokeVoidAsync("function-name", "id", data);
    }
}

再修改Component1，注入IJSRuntime并传递给Component2：

@inject IJSRuntime JSRuntime

<button class="btn btn-sm btn-outline-dark ms-2" @onclick="(async()=> await comp.Function(data))">
    show
</button>

@code{
    private Component2 comp;
    private List<string> data = new List<string>();

    protected override void OnInitialized()
    {
        // 手动传递IJSRuntime实例
        comp = new Component2(JSRuntime);
        base.OnInitialized();
    }
}

• Blazor的依赖注入仅对框架创建的组件实例生效，手动new的对象不会触发DI注入逻辑。
• 优先选择方式1，它符合Blazor组件生命周期设计，能避免手动管理依赖带来的潜在问题。

内容的提问来源于stack exchange，提问作者Haneen Al-fakhry