MMiooiMM

今天要來介紹如何將自己撰寫的元件包成元件類別庫，並提供給 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