Blazor UI：自定义/重写组件

本文档介绍了如何为 Blazor 应用程序重写依赖的 应用模块 或 主题 的用户界面。

重写Razor组件

ABP框架、预构建主题和模块定义了一些可重用的Razor组件和页面。这些页面和组件可以被您的应用程序或模块替换。

由于页面本质上就是Razor组件，因此相同的原则也适用于页面。

示例：替换品牌区域

下面的截图来自应用程序启动模板自带的 基础主题。

基础主题为布局定义了一些Razor组件。例如，上方用红色矩形高亮显示的区域被称为品牌组件。您可能希望通过添加自己的应用程序徽标来自定义此组件。让我们看看如何实现。

首先，创建您的徽标并将其放置在Web应用程序的某个文件夹下。我们使用了 wwwroot/bookstore-logo.png 路径：

下一步是在您的应用程序中创建一个Razor组件，例如 MyBranding.razor：

MyBranding.razor 的内容如下：

@using Volo.Abp.DependencyInjection


@using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic


@inherits Branding
@attribute [ExposeServices(typeof(Branding))]
@attribute [Dependency(ReplaceServices = true)]
<a href="/">
    <img src="https://koudingke.oss-cn-hangzhou.aliyuncs.com/docs/abp-docs/zh-Hans/framework/ui/blazor/bookstore-logo.png"/>
</a>

让我们解释一下这段代码：

• @inherits Branding 行继承了 基础主题 定义的 Branding 组件（位于 Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic命名空间）。
• @attribute [ExposeServices(typeof(Branding))] 将此服务（组件）注册到依赖注入系统中，用于Branding服务（组件）。
• @attribute [Dependency(ReplaceServices = true)] 用新的MyBranding类（组件）替换了Branding类（组件）。
• 其余代码与组件的内容和样式相关。

现在，您可以运行应用程序查看结果：

由于组件继承自被替换的组件，您可以在派生组件中使用基组件的所有非私有字段/属性/方法。

示例：使用代码后置文件替换

如果您更倾向于为组件的C#代码使用代码后置文件，可以在C#端使用属性。

MyBlazor.razor

@using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic

@inherits Branding
<a href="/">
    <img src="https://koudingke.oss-cn-hangzhou.aliyuncs.com/docs/abp-docs/zh-Hans/framework/ui/blazor/bookstore-logo.png"/>
</a>

MyBlazor.razor.cs

using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic;


using Volo.Abp.DependencyInjection;

namespace MyProject.Blazor.Components
{
    [ExposeServices(typeof(Branding))]
    [Dependency(ReplaceServices = true)]
    public partial class MyBranding
    {

    }
}

主题系统

主题 系统允许您构建自己的主题。您可以从头开始创建主题，或者获取 基础主题 并按需进行修改。