Blazor入門筆記（2）-分部類組件與組件的繼承

1.前言

本文接自Blazor的組件（1）-從0構建一個組件

2.分部類組件

Razor組件你可理解為就是一個類名與文件名相同的類，因此，可以新建一個同名的partial類，將組件中@code里面的代碼放置到這個partial類里面，然后將原來組件中的@code部分刪除。

將VButton組件改寫為分部類的代碼組織方式，其代碼如下（新建一個組件為VButtonPartial，並將原來的代碼VButton組件中的代碼分別復制過去）：

VButtonPartial.razor

<button type="button" class="@GetClassName()">@ChildContent</button>

VButtonPartial.razor.cs

using Microsoft.AspNetCore.Components;

namespace BlazorComponent.MyComponents
{
    public partial class VButtonPartial
    {
        [Parameter]
        public RenderFragment ChildContent { get; set; }

        [Parameter]
        public VBtnStyle BtnStyle { get; set; } = VBtnStyle.Default;

        [Parameter]
        public VBtnSize BtnSize { get; set; } = VBtnSize.Default;

        private string GetClassName()
        {
            var builder = new System.Text.StringBuilder();
            builder.Append("btn");
            if (BtnStyle != VBtnStyle.Default)
            {
                builder.Append($" btn-{BtnStyle.ToString().ToLower()}");
            }
            if (BtnSize != VBtnSize.Default)
            {
                builder.Append($" btn-{BtnSize.ToString().ToLower()}");
            }
            return builder.ToString();
        }
    }
}

3.組件的繼承

Razor組件都繼承於Microsoft.AspNetCore.Components.ComponentBase類（可以項目的obj/Debug/netstandard2.1/Razor看到），因此，我們可以新建一個繼承自ComponentBase類的父類，將組件中的公共部分提取到父類中，然后使組件繼承這個父類。例如之前的VButton組件，我們可以構建一個新的VComponentBase，該類繼承至ComponentBase類，然后將ChildContent屬性提升到這個類中：

VComponentBase.cs

public class VComponentBase:ComponentBase
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

然后新建一個組件VButtonInherit，將VButton組件中除ChildContent組件參數外的所有代碼都復制到VButtonInherit組件中，並在組件最上方使用@inherits指令，指示VButtonInherit繼承於VComponentBase類。

VButtonInherit.razor

@inherits VComponentBase
<button type="button" class="@GetClassName()">@ChildContent</button>

@code {
    [Parameter]
    public VBtnStyle BtnStyle { get; set; } = VBtnStyle.Default;

    [Parameter]
    public VBtnSize BtnSize { get; set; } = VBtnSize.Default;

    string GetClassName()
    {
        var builder = new System.Text.StringBuilder();
        builder.Append("btn");
        if (BtnStyle != VBtnStyle.Default)
        {
            builder.Append($" btn-{BtnStyle.ToString().ToLower()}");
        }
        if (BtnSize != VBtnSize.Default)
        {
            builder.Append($" btn-{BtnSize.ToString().ToLower()}");
        }
        return builder.ToString();
    }
}

當然，也可以將分部類組件與組件的繼承結合使用。

本文參考：創建和使用 ASP.NET Core Razor 組件