元件类别库魔术

今天要来介绍如何将自己撰写的元件包成元件类别库，并提供给 Blazor Server 与 Blazor WebAssembly 使用，并以 MatBlazor 来示范如何使用别人的元件类别库。

要建立 Blazor Server 与 Blazor WebAssembly 都能使用的元件类别库我们需要建立 Razor 类别库(RCL)。

注意别勾选到 Support 页面与检视，否则你的范本专案会跟我文章的内容差别很大。

建立完成後你会得到下面的专案架构。

虽然范本提供了 JavaScript 档与相关的服务，却没有在 Component1.razor 中使用，所以我们修改一下范本来让该服务能被使用如：

@* Component1.razor *@
@inject Microsoft.JSInterop.IJSRuntime JSRuntime
<div class="my-component">
    This Blazor component is defined in the <strong>Blazor30daysRCL</strong> package.
</div>
<button @onclick="@(()=>ExampleJsInterop.Prompt(JSRuntime, "Prompt..."))">Click ME</button>

这样就完成一个拥有自定义 css 与 js 且有一个元件能使用的 RCL 了，回到主专案并参考 RCL 专案後，我们就可以呼叫该专案下的所有类别了，如果不想重复写命名空间，记得在 _imports.razor 引用命名空间即可。

但会发现使用 Component1.razor 时会发生找不到对应的 css 与 js 档的错误，此时我们只需要在 index.html 载入相对的 css 与 js 档即可，而其目录为 _content/{project name}/ 就会对应到该专案的 wwwroot/ 目录如：

<!--index.html-->
<link href="_content/Blazor30daysRCL/styles.css" rel="stylesheet" />
<script src="_content/Blazor30daysRCL/exampleJsInterop.js"></script>

其中 Blazor30daysRCL 是我的 RCL 专案名称。

这样就完成 RCL 建立与使用方式了，是不是很简单呢？建立完後也可以推送到 Nuget 或者公司内部的套件平台供大家使用。

最後简单的介绍一下 MatBlazor，虽然并非官方提供，但属於 MIT 授权，如果是画面苦手或者是想参考别人如何客制化元件，推荐你参考这个 repo(MatBlazor Github)。

使用方式很简单，从 Nuget 上面下载，也可以输入 Install-Package MatBlazor 或 dotnet add package MatBlazor 安装，使用时别忘了刚刚提到的 css 与 js 档案的参考方式，在 index.html 合适的地方补上：

<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

这样就可以使用第三方套件了！至於 MatBlazor 元件的介绍与元件的设计技巧，有机会的话再分享罗。

以上就是建立 RCL 与使用 RCL 的方式，一样有简单的范本程序码 - day28。

感谢大家的阅读，我们明天见。

参考资料
ASP.NET Core Razor 元件类别库
MatBlazor
MatBlazor Github