Blazor渲染Fragment时如何为@Body传递泛型类型参数？

问题根源 #

你遇到的错误核心原因是：页面组件的泛型参数未被绑定到具体类型。页面声明了@typeparam UserType但继承时硬编码了IndexMyBlazorApp1<IUserBase>，同时泛型布局MainLayout<UserType>无法自动将自身的泛型参数传递给@Body对应的页面组件，导致页面的UserType始终是未绑定的开放泛型类型，最终无法实例化。

方案1：统一泛型参数传递，修正页面继承 #

步骤1：修正页面组件的继承逻辑 #

将页面的继承改为使用自身声明的UserType，而非硬编码IUserBase：

@page "/IndexMyBlazorApp1"
@page "/"

@using MyBlazorApp1.Contracts
@using MyBlazorApp1.Base;
@using MyBlazorApp1.Shared;
@typeparam UserType where UserType : IUserBase, new()

// 改为使用当前的UserType泛型参数
@inherits IndexMyBlazorApp1<UserType>


<div class="row mb-4">
    ...
</div>

步骤2：直接指定页面的具体泛型类型 #

由于Blazor的AuthorizeRouteView无法自动将布局的泛型参数传递给页面，若你的MyBlazorApp1中用户类型固定为UserTypeFromMyBlazorApp1，可以直接在页面中去掉@typeparam，使用具体类型：

@page "/IndexMyBlazorApp1"
@page "/"

@using MyBlazorApp1.Contracts
@using MyBlazorApp1.Base;
@using MyBlazorApp1.Shared;

// 直接继承具体类型的基类
@inherits IndexMyBlazorApp1<UserTypeFromMyBlazorApp1>


<div class="row mb-4">
    ...
</div>

方案2：改用级联值传递用户类型（更简洁） #

放弃泛型传递，改用级联值将用户类型信息传递给子组件：

步骤1：在MainLayout中添加级联值 #

@inherits LayoutComponentBase
@typeparam UserType where UserType : class, IUserBase

<PageTitle>ApplicationName</PageTitle> 

<!-- 级联用户类型信息 -->
<CascadingValue Value="typeof(UserType)" Name="CurrentUserType">
    <AuthorizeView>
       <div class='layout-wrapper layout-content-navbar'>
          <div class='layout-container'>
             <NavigationMenu UserType="UserType" />
             <div class="layout-page">
                <div class="content-wrapper">
                   <div class='container-xxl flex-grow-1 container-p-y' id="HispaCoreBlazor_MainLayout_ContentWrapper">
                      @Body               
                   </div>
                   <div class="content-backdrop fade"></div>
                </div>
             </div>
          </div>
          <div class="layout-overlay layout-menu-toggle"></div>
          <div class="drag-target"></div>
       </div>
    </AuthorizeView>
</CascadingValue>

步骤2：在页面中接收级联值 #

@page "/IndexMyBlazorApp1"
@page "/"

@using MyBlazorApp1.Contracts
@using MyBlazorApp1.Base;
@using MyBlazorApp1.Shared;

<!-- 接收级联的用户类型 -->
[CascadingParameter(Name = "CurrentUserType")]
public Type CurrentUserType { get; set; }

@inherits IndexMyBlazorApp1<IUserBase>


<div class="row mb-4">
    ...
</div>

方案3：使用依赖注入注入用户类型（推荐） #

将用户类型注册到DI容器，在组件中直接注入使用，彻底消除泛型传递问题：

步骤1：注册用户类型到DI #

在Program.cs中：

// 注册具体用户类型实现
builder.Services.AddScoped<IUserBase, UserTypeFromMyBlazorApp1>();
// 或注册类型信息
builder.Services.AddSingleton(typeof(IUserBase), typeof(UserTypeFromMyBlazorApp1));

步骤2：在组件中注入 #

@page "/IndexMyBlazorApp1"
@page "/"

@using MyBlazorApp1.Contracts
@using MyBlazorApp1.Base;
@using MyBlazorApp1.Shared;

@inject IUserBase CurrentUser

@inherits IndexMyBlazorApp1<IUserBase>


<div class="row mb-4">
    ...
</div>

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