适用于3.2.0-preview2.20160.5

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类库。这将允许我创建.razor组件文件，并且可以正常编译。但是，如果我尝试在单独的文件中实现后台代码（例如，对于HelloWorld.razor，在HelloWorld.razor.cs中名为HelloWorldBase的类），则当我尝试在主Wasm项目中引用组件时，智能提示仅建议标签名称为“ HelloWorldBase”，该组件不会产生任何输出。我怀疑缺少某种内部布线。

有人知道正确的方法来创建具有最新预览版本的可重用Blazor组件库的方法吗？可以在Wasm项目中引用它？

非常感谢

更新1

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

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，该组件的输出都不会呈现，只是一个空白。

我的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-我想知道这是否是问题，它缺少一些模板化/关联代码吗？

Answer 1

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

Answer 2

您是否使用partial class？

部分类可能无法在组件库中工作。我建议您将代码放在组件继承的基类中：

MyComponentBase.cs

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

MyComponent.razor

@inherits MyComponentBase

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