3.2.0-preview2.20160.5 的 Blazor Wasm 组件库

Question

我正在尝试使用使用最新预览版 3.2.0-preview2.20160.5 构建的 webassembly Blazor 项目构建可重用组件库。

我首先尝试添加一个 Razor 组件库 - 但是，因为它针对 .Net Core 3.1，而 Wasm 项目针对 .Net Standard 2.1，所以这是一个非启动器。

我尝试在 dotnet 命令行中使用 "blazorlib" 模板，但收到一个运行时错误，指示该模板与最新的预览版本不兼容。

我终于尝试使用普通的 .Net Standard 2.1 class 库。这将允许我创建 .razor 组件文件，并且可以正常编译。但是，如果我尝试在单独的文件中实现代码隐藏（例如，在 HelloWorld.razor.cs 中为 HelloWorld.razor 调用的 class HelloWorldBase），当我尝试在主 Wasm 中引用该组件时项目，智能感知仅建议 "HelloWorldBase" 作为标签名称，组件不产生任何输出。我怀疑缺少某种内部接线。

有谁知道使用最新预览版创建可重用的 Blazor 组件库的正确方法，可以在 Wasm 项目中引用？

非常感谢

更新 1

下面显示的是我当前在组件库（.Net Standard 2.1 Class 库项目）中的结构：

HelloWorld.razor:

@namespace BlazorPWA.Common.Components

@inherits HelloWorldBase

<h1>Hello World</h1>

HelloWorld.razor.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorPWA.Common.Components
{
    public class HelloWorldBase : ComponentBase
    {
    }
}

在主项目中，引用了组件库，intellisense 为我提供了 HelloWorld 和 HelloWorldBase，而将 .razor 组件直接添加到主项目中，我只会看到 .razor 文件名：

无论我选择HelloWorld，还是HelloWorldBase，组件的输出都没有渲染，只是一片空白space。

我的UserHome.razor（尝试组件标签的所有 4 种排列）：

@page "/"

@namespace BlazorPWA.Portal.Views

@inherits UserHomeBase

Welcome to your new app.

UserId is <Observable>@UserStore.User?.UserId</Observable>

<button @onclick="IncrementUserId">Increment UserId</button>

<HelloWorld></HelloWorld>
<HelloWorldBase></HelloWorldBase>
<BlazorPWA.Common.Components.HelloWorld></BlazorPWA.Common.Components.HelloWorld>
<BlazorPWA.Common.Components.HelloWorldBase></BlazorPWA.Common.Components.HelloWorldBase>

输出和来源-可以看出，组件标签只是被输出，就好像它们是HTML个标签一样：

要将 Razor 组件添加到主项目，我会添加新项目 --> Razor 组件，而我在组件库中没有此选项可用 - 我必须添加另一种文件类型，并且然后重命名为 .razor - 我想知道这是否是问题所在，它缺少一些 templated/wire-up 代码？

Answer 1

您使用的是 partial class 吗？

部分 classes 在组件库中可能不起作用。我建议您将代码隐藏在组件继承的基础 class 中：

MyComponentBase.cs

public abstract class MyComponent : ComponentBase 
{
    protected void MyCodeBehindMethod()
    {
         ....
    }
}

MyComponent.razor

@inherits MyComponentBase

@code {
    protected override void OnInitialized()
    {
         MyCodeBehindMethod();
    }
}

Answer 2

原来我需要使用 dotnet CLI 添加一个新的 "razorclasslib" 项目。当像这样添加时，而不是通过 Visual Studio IDE，项目针对 .Net Standard 而不是 .Net Core，解决了问题。

3.2.0-preview2.20160.5 的 Blazor Wasm 组件库

Blazor Wasm Component Library for 3.2.0-preview2.20160.5

webassembly

blazor