如何将Blazor组件添加到类库并解决组件识别异常问题

问题描述 #

我创建了包含标准Blazor Server示例项目和类库项目的解决方案，目标是将自定义组件发布到NuGet供他人使用，但遇到以下问题：

• Visual Studio无法识别类库中的Blazor组件，无法关联component.razor与对应的component.razor.cs代码文件
• 已在类库的.csproj中添加以下配置，但问题仍未解决：

  <ItemGroup>
      <SupportedPlatform Include="browser" />
  </ItemGroup>
  
  <ItemGroup>
      <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.8" />
  </ItemGroup>
  

• 将组件复制到Blazor Server项目可正常运行（示例中的ExPopupMessageBox），但使用类库中的PopupMessageBox时存在两个问题：
  1. 在MainLayout.razor中使用该组件无显示（替换为ExPopupMessageBox则正常）：

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

  2. 类库中代码需显式继承ComponentBase，且PopupMessageBox.razor.cs被提示不是分部类定义，编译器未将其识别为组件

解决方案 #

1. 修正类库项目SDK #

Blazor组件类库必须使用Microsoft.NET.Sdk.Razor SDK，在类库的.csproj文件顶部替换默认SDK：

<Project Sdk="Microsoft.NET.Sdk.Razor">

仅添加SupportedPlatform和包引用无法让编译器识别Razor组件结构。

2. 保证分部类的一致性 #

• 确保PopupMessageBox.razor和PopupMessageBox.razor.cs的命名空间完全相同
• PopupMessageBox.razor.cs中的分部类名称必须与Razor组件类名一致，且无需显式继承ComponentBase（Razor文件会自动生成继承该类的分部代码）
  正确的代码示例：

  namespace YourComponentLibraryNamespace;
  
  public partial class PopupMessageBox
  {
      // 自定义组件逻辑
  }
  

3. 配置Blazor Server项目的组件引用 #

• 在Blazor Server项目中添加对类库的项目引用（或NuGet包引用）
• 在Blazor Server的_Imports.razor文件中添加类库的命名空间，简化组件调用：

  @using YourComponentLibraryNamespace
  

4. 清理重建解决方案 #

• 执行Build -> Clean Solution清理现有编译文件
• 手动删除类库和Blazor Server项目下的bin、obj文件夹
• 执行Build -> Rebuild Solution重新编译整个解决方案

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