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 组件