Ant Design Blazor 組件庫的路由復用多標簽頁(yè)功能

最近，在 Ant Design Blazor 組件庫中實(shí)現多標簽頁(yè)組件的呼聲日益高漲。于是，我利用周末時(shí)間，結合 Blazor 內置路由組件實(shí)現了基于 `Tabs` 組件的 `ReuseTabs` 組件。

最近，在 Ant Design Blazor 組件庫中實(shí)現多標簽頁(yè)組件的呼聲日益高漲。于是，我利用周末時(shí)間，結合 Blazor 內置路由組件實(shí)現了基于 Tabs 組件的 ReuseTabs 組件。

前言

Blazor 是 .NET 最新的前端框架，可以基于 WebAssembly 或 SignalR （WebSocket）構建前端應用程序，基于 WebAssembly 托管模型的 Blazor 甚至可以離線(xiàn)運行。再加上可以共用 .NET 類(lèi)庫，能使代碼量比以往的基于 JS 的前后端分離模型少 1/3。而且現在 .NET 開(kāi)發(fā)者也可以使用自己熟悉的技術(shù)和經(jīng)驗來(lái)開(kāi)發(fā)前端應用了，不同技術(shù)棧的開(kāi)發(fā)人員之間的溝通成本也大大減少，從而再一次解放了生產(chǎn)力。

所以，Blazor 是 .NET 開(kāi)發(fā)者的又一生產(chǎn)力技術(shù)！

通過(guò)使用 Blazor 社區生態(tài)開(kāi)源的 UI 組件庫，常用的組件都被封裝了起來(lái)，用戶(hù)再也不需要寫(xiě) JS 和 CSS 了，使得 .NET 開(kāi)發(fā)人員在社區里連連稱(chēng)贊。目前，已經(jīng)有大量的基于 Blazor 構建的企業(yè)級應用程序被部署上線(xiàn)，逐漸被企業(yè)認可。

正文

什么是路由復用多標簽頁(yè)

本文標題中的路由復用，是 Angular 的 RouteReuseStrategy 中的概念，在中文社區也常被稱(chēng)作“多標簽頁(yè)”，主要的功能是當切換頁(yè)面時(shí)，保持頁(yè)面的狀態(tài)，并且可以通過(guò)任意切換頁(yè)面，當前展示的頁(yè)面狀態(tài)能夠恢復。通常是被用在比較復雜的后臺管理系統，用戶(hù)可以在篩選了表格后，進(jìn)入記錄的詳情頁(yè)，再回到列表頁(yè)后，仍然能保持原來(lái)的搜索條件、翻頁(yè)數等等；也或者是填寫(xiě)表單時(shí)，需要去別的頁(yè)面查看正確的信息，在回到表單時(shí)，表達上已填過(guò)的內容不會(huì )丟失。

而由于天然的能復用 C# 代碼的優(yōu)勢， Blazor 通常被用于構建后臺管理系統，所以使用標簽頁(yè)就成為了普遍的需求。然鵝，Blazor 官方團隊并沒(méi)有給我們直接提供這樣的組件，所以就需要社區的小伙伴來(lái)實(shí)現了。

但是縱觀(guān)社區中的幾個(gè)開(kāi)源組件庫，都只是實(shí)現了通用的 Tabs 標簽頁(yè)組件，只能當作切換面板來(lái)使用。要用來(lái)實(shí)現“多標簽頁(yè)”的功能，要么不支持，要么還得要直接或間接地依賴(lài)自己菜單組件和布局組件，再要依賴(lài)頁(yè)面文件路徑，拼接出頁(yè)面組件的類(lèi)型，最后用反射來(lái)創(chuàng )建頁(yè)面組件……

雖然說(shuō)它們確實(shí)實(shí)現了多標簽頁(yè)的功能，但是實(shí)現方式不甚優(yōu)雅。耦合度非常高，只能在組件庫自己的框架布局中使用，而不能單獨拎出來(lái)使用。另外，反射的性能也不好，還要把頁(yè)面按照約定放置，對用戶(hù)種種制約。

當然，社區中還流傳一個(gè)比較認可的方案，就是 BlazorDemoMultiPagesTab 項目。它提供了一個(gè)原型，通過(guò)結合 Blazor 內置的路由組件實(shí)現了路由多標簽頁(yè)。但問(wèn)題是它只是一個(gè) demo，只實(shí)現了原理，代碼比較凌亂，作者也沒(méi)有再做整理，也沒(méi)有封裝成組件，如果想在自己項目中使用起來(lái)，肯定會(huì )薅禿自己的頭發(fā)的。

Ant Design Blazor 中的 ReuseTabs 組件

最近，在 Ant Design Blazor 組件庫中實(shí)現多標簽頁(yè)組件的呼聲日益高漲。于是，我利用周末時(shí)間，基于 BlazorDemoMultiPagesTab 中提供的思路，結合 Blazor 內置路由組件實(shí)現了基于 Tabs 組件的 ReuseTabs 組件。

ReuseTabs 組件只包含兩個(gè)子組件，ReuseTabsRouteView 和 ReuseTabs，其中 ReuseTabsRouteView 繼承自?xún)戎玫?RouteView 組件，負責接管頁(yè)面組件的生命周期，使頁(yè)面組件能夠保持狀態(tài)或被銷(xiāo)毀；ReuseTabs 負責標簽的展示和交互。除此之外，沒(méi)有再依賴(lài)菜單、布局之類(lèi)的其他組件，因此可以直接用于任何 Blazor 應用程序，也可以很好地與其他組件庫一起使用。

主要的特點(diǎn)

• 只需修改兩處代碼即可應用
• 支持靜態(tài)或動(dòng)態(tài)地設置標簽名
• 與路由同步，支持 <a> 標簽、NavigationManger 等各種方式的跳轉

下面介紹一下基礎的使用方法，以 dotnet new 模板項目為例。

使用方法

首先，按照 Ant Design Blazor 文檔中介紹的方式安裝 AntDesign 包和服務(wù)注冊。

然后，修改項目中的 App.razor 文件，把 RouteView 替換成 ReuseTabsRouteView。

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
-       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+       <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    ...
</Router>

修改項目中的 MainLayout.razor 文件，

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
-       <div class="top-row px-4">
-           <a  rel="external nofollow"  target="_blank" class="ml-md-auto">About</a>
-       </div>
-       <div class="content px-4">
-           @Body
-       </div>
+       <ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" / >
    </div>
</div>

兩種方式自定義標簽名

如果是純文本，可以在頁(yè)面組件使用 ReuseTabsPageTitle 特性。

@page "/counter"
+ @attribute [ReuseTabsPageTitle("Counter")]

如果需要使用模板來(lái)獲取動(dòng)態(tài)的標簽名，比如添加另一個(gè)組件，或者從頁(yè)面內容中獲取標題，需要實(shí)現 IReuseTabsPage 接口：

@page "/"
+ @implements IReuseTabsPage

<h1>Hello, world!</h1>

@code{
+   public RenderFragment GetPageTitle() =>
+       @<div>
+           <Icon Type="home"/> Home
+       </div>
+   ;
}

注意：當前 ReuseTabs 組件在 0.9.0 版本的每日構建包中，在正式發(fā)布之前，需要參考來(lái)安裝。

后續功能

目前該組件只實(shí)現了基本的功能，還有一些功能在后續的計劃當中：

• 右鍵菜單
• 代碼方式關(guān)閉
• 緩存策略
• 路由守衛與權限控制

后記

Blazor 社區中對多標簽頁(yè)的呼聲有一年多了，這幾天終于實(shí)現了，國內外的社區都一片歡騰，也是頗有成就感的。

對于實(shí)現的細節，感興趣的同學(xué)可以到 Ant Design Blazor 的源碼中查看，也只是幾個(gè)文件。當然，如果感興趣的同學(xué)比較多，我也可以寫(xiě)一篇詳細的文章來(lái)介紹。

其實(shí)我是比較希望社區中能有更多的愛(ài)好者站出來(lái)，分享心得、貢獻開(kāi)源項目，這樣才能讓社區健康發(fā)展起來(lái)。
Ant Design Blazor 發(fā)展至今已有一年有多，但是說(shuō)實(shí)話(huà)相對于其他組件庫項目的作者，我自己的投入的時(shí)間和貢獻并沒(méi)有很多。其中除了貢獻代碼，一大部分精力都花在了社區的運營(yíng)。
為項目作宣傳，把路人變成用戶(hù)，再把用戶(hù)變成貢獻者，讓更多人各自花少量精力，達到眾人拾柴的效果，才是開(kāi)源項目得以長(cháng)期活躍的長(cháng)久之計。

最后還是非常感激支持我們的用戶(hù)和貢獻者！他們的每個(gè) issue、案例和 PR 都是對我們的肯定，也是讓我們堅持的動(dòng)力！

參考鏈接

到此這篇關(guān)于A(yíng)nt Design Blazor 組件庫的路由復用多標簽頁(yè)介紹的文章就介紹到這了,更多相關(guān)Ant Design Blazor 組件庫內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！