@ChildContent
在Blazor应用程序中，页面布局和状态管理是两个重要的概念。布局决定了页面的结构和样式，而状态管理则涉及到页面间的数据共享。本文将介绍两种实现这些功能的技术：布局组件和依赖注入。
布局组件是一种在Blazor中创建页面布局的方法。通过定义一个组件，可以将页面内容和布局分离，使得布局可以被多个页面复用。以下是实现布局组件的步骤：
首先，需要在《_ViewImports.cshtml》文件中删除或注释掉定义所有页面布局的《@layout MainLayout》指令。
然后，创建一个《AppState》类来存储页面和布局之间需要传递的数据。在这个例子中，只捕获页面名称。
public class AppState
{
public string CurrentPageName { get; set; }
}
接下来，创建一个布局组件《MainLayout2》，它接受调用标记中的子内容。这个组件有两个关键参数：《AppState》和《ChildContent》。它只是将《AppState》传递给《NavMenu》组件。
@inherits BlazorLayoutComponent
@ChildContent
@functions {
[Parameter]
protected AppState appState { get; set; }
[Parameter]
protected RenderFragment ChildContent { get; set; }
}
在页面中，通过《
@page "/counter"
@inherits BlazorComponent
Current count: @currentCount
@functions {
int currentCount = 0;
void IncrementCount() {
currentCount++;
}
protected AppState appState { get; set; } = new AppState();
protected override void OnInit() {
appState.CurrentPageName = "Counter";
base.OnInit();
}
}
另一种可能性是使用依赖注入将《AppState》的一个实例注入到页面和布局中，然后在页面中更新该对象，布局中也会看到更新。
首先，需要在《Startup.ConfigureServices》中注册《AppState》类。需要将其注册为Scoped生命周期。
services.AddScoped<AppState>();
然后在《MainLayout.cshtml》中注入《AppState》并将其传递给《NavMenu》：
@inherits BlazorLayoutComponent
@inject AppState appState
@Body
还需要在页面中注入《AppState》，并在《OnInit》方法中设置《CurrentPageName》。在这种情况下，由于已经从《_ViewImports.cshtml》中移除了《@layout》指令，需要在页面中指定布局。
@page "/counter2"
@inject AppState appState
@layout MainLayout
Current count: @currentCount
@functions {
int currentCount = 0;
void IncrementCount() {
currentCount++;
}
protected override void OnInit() {
appState.CurrentPageName = "Counter";
base.OnInit();
}
}
这两种技术的主要区别在于《AppState》的生命周期。使用布局组件技术时，每次页面加载时都会创建一个新的《AppState》实例。而使用依赖注入技术时，直到用户刷新页面，都会保持同一个《AppState》。
这既是优点也是缺点。一方面，如果需要从数据库或API检索一些数据，已经内置了缓存。另一方面，需要记住数据可能会过时。