Blazor 组件：创建、生命周期、嵌套和 UI 集成

在本文中，您将获得以下问题的答案。

• 什么是 Blazor 组件？
• 如何使用组件？
• Blazor 组件的生命周期是什么？
• 我们可以从一个组件调用另一个组件吗？
• 如何创建 Blazor 组件？
• 在组件中哪里写 C# 代码？

什么是 Blazor 组件？

Blazor 组件是 Blazor 应用程序的构建块。用于 GUI 和事件代码的组件。您可以将 GUI 代码（HTML、CSS）和 C# 代码写入组件或将它们分开。您可以将组件重新用作用户控件（Asp.Net WebForm）和部分视图（Asp.Net MVC）。

Blazor 组件会创建一个 RAZOR 扩展文件。如果您的组件名称是 DateCalculator，则组件文件名将类似于 DATECALCULATOR.RAZOR。Blazor Component 类继承自 ComponentBase 类。ComponentBase 类是组件的可选基类。或者，组件可以直接实现 IComponent。

Blazor 中的组件我们可以称为 Razor 组件、Blazor 组件或仅组件。Blazor 组件名称应以大写字母开头。使用 PascalCase 是一种很好的做法。

例子

DateCalculator.razor: Correct
dateCalculator.razor: Wrong
datecalculator.razor: Wrong

访问以下参考链接

https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase?view=aspnetcore-8.0
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-8.0

根据上图，您可以看到主要有两个主要组件。

1. 标题组件
2. 页脚组件

Header 组件由三个组件组成

1. Logo组件：用于日志显示的UI代码。
2. 导航组件：菜单的 UI 代码。
3. 用户配置文件组件：用户配置文件选项的 UI 代码。

页脚组件由三个组件组成

1. 快速链接组件：门户的重要链接。
2. 社交媒体组件：链接至社交平台。

Blazor 组件的生命周期事件是什么？

以下是Blazor组件的生命周期事件。

1. 初始化时
2. 初始化异步
3. 参数设置时
4. OnParamtersSetAsync
5. 渲染后
6. 渲染后异步

OnInitialized 和 OnInitializedAsync 在组件渲染之前被调用。

OnParametersSet 和 OnParametersSetAsync 在 OnInitialized、OnInitializedAsync 之后立即调用，并且从父级接收到新参数。

OnAfterRender 和 OnAfterRenderAsync 在组件完全渲染后调用。

我们可以从一个组件调用另一个组件吗？

是的，我们当然可以从任何组件调用任何组件。组件可以相互嵌套，也可以在项目内甚至跨多个项目重复使用。

如何创建 Blazor 组件？

切换到解决方案资源管理器并右键单击 PAGES 文件夹。

选择添加 RAZOR 组件选项。

如下图所示。

上图显示的是使用名称“DateCalculator.razor”创建的 Razor 组件。

DateCalculator.Razor 是使用以下默认代码创建的。

<h3>DateCalculator</h3>
@code {
}

在组件中哪里写 C# 代码？

上图中第 3 行，在 @Code {} 里面，可以编写 C# 代码。

编写代码根据当前时间显示早上好、下午好和晚上好

双击位于 PAGES 文件夹内的 DateCalculator.razor 组件。

@page "/datecalc"

<h3>Welcome User</h3>

Current Date: @DateTime.Now.ToLongDateString()
<br />
<br />
Current Time: @DateTime.Now.ToLongTimeString()
<br />
<br />
<label>@Msg</label>
<br />
<br />
<button>Ok</button>

@code {
    int hours = DateTime.Now.Hour;
    string Msg = string.Empty;

    protected override void OnInitialized()
    {
        if (hours < 12)
        {
            Msg = "Good Morning";
        }

        if (hours > 12 && hours < 18)
        {
            Msg = "Good Afternoon";
        }

        if (hours > 18)
        {
            Msg = "Good Evening";
        }

        base.OnInitialized();
    }
}

按 F5 并点击浏览器地址来运行该应用程序。

类型： http://localhost(portno)/decals

输出