Blazor 组件库的开发应用指南

Blazor 是关于组件的。我们创建不同类型的组件并在整个项目中重复使用它们。没有人想重新发明轮子，因此创建一个可重用 Blazor 组件库始终是一个好主意，这些组件不仅可以在多个项目之间共享，还可以作为 NuGet 包与其他人共享。 Blazor 允许我们在名为 Razor 类库的新项目模板的帮助下创建此类组件库，在这篇文章中，我将向您展示如何创建此类库，并不仅共享组件，还共享静态内容，如图像、样式表、等等。

下载：Download Source Code

创建 Razor 组件库
在 Visual Studio 2019 中创建一个名为 BlazorClassLibraryDemo 的新 Blazor 服务器应用程序。确保您可以毫无问题地构建和运行您的项目。如果您不确定如何创建 Blazor 服务器应用程序，那么我建议您阅读 Blazor 服务器和 WebAssembly 应用程序的初学者指南

若要在 Blazor 项目中添加新组件库，请右键单击解决方案并选择**“添加”>“新建项目…”选项**。从可用项目模板列表中选择 Razor 类库项目模板
为项目指定任何合适的名称，我选择了名称 MyComponentsLibrary。

您将被要求再次选择项目模板，并在以下对话框中显示一些附加选项。此对话框中只有一项可供选择，因此请确保选择 Razor 类库并单击“创建”按钮。

默认情况下，模板将创建一个名为 Component1.razor 的示例组件，其中包含一些附加文件。在我们开始创建第一个共享组件之前，我们需要删除 Component1.razor 和 ExampleJsInterop.cs 以及 wwwroot 文件夹中的所有内容，以便我们有一个干净的基础开始。

在 Razor 类库中创建组件

让我们在 Razor 类库项目 MyComponentsLibrary 中创建我们的第一个可重用/共享组件。右键单击类库项目，然后选择[添加 > 新建项目]。选择 Razor Component template 并指定组件名称 TableWidget.razor。
如果您希望将 C# 代码与组件视图分开，您还可以添加 TableWidget.razor.cs 代码隐藏文件。 TableWidget 组件是一个简单的模板化组件，可用于从任何对象列表生成 HTML 表格。如果您想了解有关 Blazor 模板化组件的更多信息，那么您可以阅读之前文章 Blazor 模板化组件的开发人员指南。
在 TableWidget.razor 组件视图文件中添加以下标记。

TableWidget.razor

@typeparam TItem
<table class="table table-striped table-bordered">
    <thead class="thead-green">
        <tr>
            @HeaderTemplate
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Items)
    {
        <tr>
            @RowTemplate(item)
        </tr>
    }
    </tbody>
    <tfoot>
        <tr>
            @FooterTemplate
        </tr>
    </tfoot>
</table>

以下是我们的 TableWidget 组件的代码隐藏文件。该组件具有RenderFragment类型的Header、Row和Footer模板，用于在视图中生成HTML表格的页眉、正文和页脚。

TableWidget.razor.cs

using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
 
namespace MyComponentsLibrary
{
    public partial class TableWidget<TItem>
    {
        [Parameter]
        public RenderFragment HeaderTemplate { get; set; }
 
        [Parameter]
        public RenderFragment<TItem> RowTemplate { get; set; }
 
        [Parameter]
        public RenderFragment FooterTemplate { get; set; }
 
        [Parameter]
        public IReadOnlyList<TItem> Items { get; set; }
    }
}

我们在 Razor 类库中创建的每个可重用组件也可以有其样式表来定义组件的外观。例如，如果我们希望我们的 TableWidget 组件生成带有深绿色标题的表格，我们可以在 TableWidget.razor.css 文件中定义我们组件的样式。

TableWidget.razor.css

.thead-green {
    background-color: darkgreen;
    color: white;
}

从 Razor 类库使用 Razor 组件

现在我们已经在类库项目中定义了我们的 TableWidget 组件，现在是时候在我们的 Blazor 项目中使用这个组件了。右键单击解决方案资源管理器中的 Dependencies 节点，然后从上下文菜单中选择 Add Project Reference… 选项。选择 MyComponentsLibrary 项目并单击确定。

如果您想在多个页面上使用 TableWidget 组件，那么建议在 _Imports.razor 文件中添加库的引用。

@using MyComponentsLibrary

Blazor 项目模板默认生成一个 FetchData.razor 页面，显示来自后端服务的天气预报对象。我们可以在这个页面上测试我们的 TableWidget 组件。打开 FetchData.razor 文件并将 HTML 表格替换为 TableWidget 组件，如下面的代码片段所示。

FetchData.razor

@page "/fetchdata"
 
@using BlazorClassLibraryDemo.Data
@inject WeatherForecastService ForecastService
 
<h1>Weather forecast</h1>
 
@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <TableWidget Items="forecasts" Context="forecast">
        <HeaderTemplate>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </HeaderTemplate>
        <RowTemplate>
            <td>@forecast.Date.ToShortDateString()</td>
            <td>@forecast.TemperatureC</td>
            <td>@forecast.TemperatureF</td>
            <td>@forecast.Summary</td>
        </RowTemplate>
    </TableWidget>
}
 
@code {
    private WeatherForecast[] forecasts;
 
    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

运行该项目，您应该会看到使用我们的 TableWidget 组件生成的天气预报网格。您现在可以在多个页面或项目中重用 TableWidget 组件，并且您将始终看到为您生成的相同网格。

使用 Razor 类库中的图像

Razor 类库可以公开静态资产，例如图像，并且这些资产可以由使用该库的 Blazor 应用程序使用。让我们在 MyComponentsLibrary 项目的 wwwroot/images 文件夹中添加一个图像 blazor_logo.jpg。若要在 Blazor 组件内使用此图像，请在 MyComponentsLibrary 项目中添加一个名为 BlazorLogo.razor 的组件。

使用简单的 img 标记将 blazor_logo.jpg 图像添加到 BlazorLogo.razor 组件中。

BlazorLogo.razor

<img src="images/blazor_logo.jpg" alt="Blazor Logo"/>

要在 Blazor 应用程序中使用 BlazorLogo.razor 组件，请从我们上面创建的 Blazor 演示应用程序打开 Index.razor 页面，然后直接使用 BlazorLogo 组件，如下面的代码片段所示。

Index.razor

<h1>Hello, Blazor!</h1>
 
<BlazorLogo></BlazorLogo>

运行该项目，您会注意到图像未按预期呈现。这是因为无法从类库项目外部访问图像 images/blazor_logo.jpg 的相对路径。
要解决上述问题，您需要使用下面给出的特殊路径语法：

_content/{Razor Class Library Name}/{Path to file}

在上面的语法中，{Razor Class Library Name} 是类库名称的占位符，例如我的组件库。 {Path to file} 是 wwwroot 文件夹下的文件路径。

让我们使用上面描述的特殊语法来修复我们的图像路径

BlazorLogo.razor

<img src="_content/MyComponentsLibrary/images/blazor_logo.jpg" alt="Blazor Logo"/>

再次运行项目，这次您会注意到图像按预期呈现。
我们还可以使用上述特殊语法直接访问 Razor 类库中的图像。例如，下面的代码片段将使用 BlazorLogo 组件以及使用 img 标记显示 Razor 类库中的图像。请注意，Blazor 应用程序中的 img 标记使用相同的特殊语法来访问 MyComponentsLibrary 中可用的图像

Index.razor

<h1>Hello, Blazor!</h1>
 
<h4>Showing Image from a Component available inside Class Library</h4>
 
<BlazorLogo></BlazorLogo>
 
<h4>Showing Image directly from Class Library</h4>
 
<img src="_content/MyComponentsLibrary/images/blazor_logo.jpg" alt="Blazor Logo" />

再次运行该项目，这次您应该会看到使用两种方法渲染两次的相同图像。

使用 Razor 类库中的样式表

我们还可以在 Razor 类库中添加样式表，Blazor 应用程序可以使用这些样式表中定义的样式。让我们在 wwwroot/css 文件夹中添加一个样式表 components.css
出于演示目的，让我们添加一些与 img 标签相关的样式

components.css

img
{
    background-color: lightgreen;
    padding: 5px;
    border: 1px solid black;
}

要在我们的 Blazor 应用程序中包含 components.css 文件，我们可以使用与上面看到的相同的特殊语法。打开 Blazor 服务器应用程序中可用的 _Host.cshtml 文件，并使用以下链接标记将 components.css 文件包含在 head 标记中。

_Host.cshtml

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    ...
     
    <link href="~/_content/MyComponentsLibrary/css/components.css" rel="stylesheet" />
</head>

运行这个项目，你会发现我们在components.css文件中定义的img标签相关的样式被应用到了项目的所有图片上。

总结概括

在这篇文章中介绍了可重用组件的非常基本的示例，但您可以看到 Razor 类库的强大功能。开发人员可以创建一些很酷且令人惊叹的可重用 Blazor 组件库，这些库不仅可以为您的项目添加一些高级功能，还可以提高开发速度。许多组件供应商已经开发了一些开源和商业库，例如 MatBlazor、Radzen、Syncfusion 等。