Blazor组件库如何设置全局泛型状态并实现跨组件访问？

需求背景 #

我正在开发一个Razor组件库，需要对外暴露组件的同时，让使用者能设置一个全局泛型对象供所有组件访问，且泛型类型必须在启动时确定，运行时不可变更。

现有实现代码 #

MyComponent.razor #

@typeparam TGlobalState
@typeparam TScope

<p>Test</p>
@Default

@code {
    [CascadingParameter(Name = "Global")]
    public required TGlobalState Global { get; set; }

    [CascadingParameter(Name = "Scope")]
    public required TScope Scope { get; set; }

    public Context<TGlobalState, TScope> CurrentScope => new()
    {
        Global = Global,
        Scope = Scope
    };
    [EditorRequired, Parameter]
    public required RenderFragment<Context<TGlobalState, TScope>> Default { get; set; }
   
    [CascadingParameter(Name = "ComponentName")]
    public required string ComponentName { get; set; }
    [Parameter]
    public string Key { get; set; }

    public class Context<TGlobal, TLocal>
    {
        public required TGlobal Global { get; set; }
        public required TLocal Scope { get; set; }
    }
}

ScopeProvider.razor #

@attribute [CascadingTypeParameter(nameof(TScope))]
@typeparam TScope

<CascadingValue Value="@ComponentName" Name="ComponentName">
    <CascadingValue Value="@Scope" Name="Scope">
        @ChildContent
    </CascadingValue>
</CascadingValue>

@code {
    [Parameter]
    public required string ComponentName { get; set; } = "";

    [Parameter]
    public TScope? Scope { get; set; }

    [Parameter]
    public required RenderFragment ChildContent { get; set; }
}

GlobalStateProvider.razor #

@attribute [CascadingTypeParameter(nameof(TGlobalState))]
@typeparam TGlobalState

<CascadingValue Value="@Global" Name="Global">
    @ChildContent
</CascadingValue>

@code {
    [Parameter]
    public TGlobalState? Global { get; set; }

    [Parameter]
    public required RenderFragment ChildContent { get; set; }
}

预期使用方式 #

MainLayout.razor #

@inherits LayoutComponentBase

<GlobalStateProvider Global="globalState">
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

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

</GlobalStateProvider>
@code{
    GlobalState globalState = new();
}

Index.razor #

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>
Welcome to your new app.

@*<GlobalStateProvider Global="@(new GlobalState())">*@ // 取消注释后可正常工作
    <ScopeProvider Scope="@(new HomeState())">
        <MyComponent Key="SomeText">
            <Default>@context.Global.Something</Default>
        </MyComponent>
    </ScopeProvider>
@*</GlobalStateProvider >*@

@code{
    private HomeState state = new();

    private class HomeState
    {
        public string Name { get; set; }
    }
}

当前问题 #

当GlobalStateProvider位于其他Razor文件（如MainLayout）中时，MyComponent无法从中推断出TGlobalState的类型，已知官方文档明确说明这种场景下类型推断不生效。

可行替代方案：依赖注入+泛型服务注册 #

方案思路 #

将全局泛型状态以单例服务形式注册到DI容器，确保类型在启动时确定且运行时不可变更；组件通过构造函数或[Inject]属性直接注入该服务，彻底规避级联参数的类型推断问题。

具体实现步骤 #

1. 定义全局状态标记接口（可选但推荐）

增强扩展性，定义基础接口约束：

public interface IGlobalState { }

使用者的全局状态类实现该接口：

public class GlobalState : IGlobalState
{
    public string Something { get; set; } = "Global Default Value";
    // 其他业务属性...
}

2. 组件库中创建泛型状态访问器

public class GlobalStateAccessor<TGlobal> where TGlobal : class, IGlobalState
{
    public TGlobal State { get; }

    public GlobalStateAccessor(TGlobal state)
    {
        State = state ?? throw new ArgumentNullException(nameof(state));
    }
}

3. 提供DI扩展方法，强制启动时确定类型

在组件库中添加扩展，让使用者必须在启动阶段明确泛型类型：

public static class GlobalStateExtensions
{
    // 带初始状态的注册方式
    public static IServiceCollection AddGlobalState<TGlobal>(this IServiceCollection services, TGlobal initialState) 
        where TGlobal : class, IGlobalState
    {
        // 单例注册，确保全局唯一且类型固定
        services.AddSingleton<TGlobal>(initialState);
        services.AddSingleton<GlobalStateAccessor<TGlobal>>();
        return services;
    }

    // 无初始状态的重载（需全局状态类有默认构造）
    public static IServiceCollection AddGlobalState<TGlobal>(this IServiceCollection services) 
        where TGlobal : class, IGlobalState, new()
    {
        return services.AddGlobalState(new TGlobal());
    }
}

4. 修改组件，通过DI注入全局状态

调整MyComponent.razor，移除级联参数Global，改为注入访问器：

@typeparam TScope
@typeparam TGlobalState where TGlobalState : class, IGlobalState
@inject GlobalStateAccessor<TGlobalState> GlobalAccessor

<p>Test</p>
@Default

@code {
    private TGlobalState Global => GlobalAccessor.State;

    [CascadingParameter(Name = "Scope")]
    public required TScope Scope { get; set; }

    public Context<TGlobalState, TScope> CurrentScope => new()
    {
        Global = Global,
        Scope = Scope
    };
    [EditorRequired, Parameter]
    public required RenderFragment<Context<TGlobalState, TScope>> Default { get; set; }
   
    [CascadingParameter(Name = "ComponentName")]
    public required string ComponentName { get; set; }
    [Parameter]
    public string Key { get; set; } = string.Empty;

    public class Context<TGlobal, TLocal>
    {
        public required TGlobal Global { get; set; }
        public required TLocal Scope { get; set; }
    }
}

5. 使用者启动时注册全局状态

在Program.cs中完成注册，确定泛型类型：

var builder = WebApplication.CreateBuilder(args);

// 注册全局状态，此处确定TGlobal为GlobalState，运行时不可变更
builder.Services.AddGlobalState<GlobalState>(new GlobalState { Something = "Initial Global Value" });

// 其他服务注册...

6. 使用者使用组件

此时MyComponent可在任意位置直接使用，无需上层级联GlobalStateProvider：

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<ScopeProvider ComponentName="Home" Scope="@state">
    <MyComponent TGlobalState="typeof(GlobalState)">
        <Default>@context.Global.Something</Default>
    </MyComponent>
</ScopeProvider>

@code{
    private HomeState state = new();

    private class HomeState
    {
        public string Name { get; set; } = "Home Scope Value";
    }
}

方案优势 #

• 类型在启动时通过DI注册确定，运行时无法变更，完全符合需求；
• 组件无需依赖上层组件的级联参数，彻底解决类型推断失效问题；
• 全局状态以单例存在，确保所有组件访问同一实例；
• 扩展方法强制使用者明确指定泛型类型，避免隐式推断的不确定性。

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