Blazor中如何从Main.razor向布局组件传递数据？

1. 创建布局包装组件 #

在项目中新增LayoutWrapper.razor组件，集中管理要传递给RCL布局的所有参数和RenderFragment：

<CascadingValue Value="TeamName">
    <CascadingValue Value="TeamIcon">
        <CascadingValue Value="@NavMenuContent">
            @ChildContent
        </CascadingValue>
    </CascadingValue>
</CascadingValue>

@code {
    // 统一配置全局布局需要的简单类型数据
    private string TeamName => "研发团队";
    private string TeamIcon => "/icons/team-logo.svg";

    // 定义全局导航菜单的RenderFragment
    private RenderFragment NavMenuContent => @<NavMenu>
        <!-- 可添加项目专属导航链接 -->
        <NavLink Icon="@Icons.Material.Filled.Dashboard" Href="/dashboard" Text="控制台"/>
    </NavMenu>;

    [Parameter] public RenderFragment ChildContent { get; set; }
}

2. 改造Main.razor，用包装组件包裹路由逻辑 #

将原有Router组件嵌套到LayoutWrapper内部，让所有页面自动继承包装组件提供的级联参数：

<LayoutWrapper>
    <Router AppAssembly="@typeof(Main).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
        </Found>
        <NotFound>
            <PageTitle>页面未找到</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <MudAlert Variant="Variant.Filled" Severity="Severity.Warning">抱歉，当前地址无内容。</MudAlert>
            </LayoutView>
        </NotFound>
    </Router>
</LayoutWrapper>

3. 确认布局组件接收参数（原有代码无需修改） #

你的MainLayout已通过[CascadingParameter]标记接收项，保持现有代码即可：

public sealed partial class MainLayout
{
    [CascadingParameter] public string TeamName { get; set; }
    [CascadingParameter] public string TeamIcon { get; set; }
    private string Version => $"Version: {GetType().Assembly.GetName().Version!.ToString()}";
    [CascadingParameter] public RenderFragment NavMenuContent { get; set; }

    private bool _drawerOpen;
    
    private Task ToggleDrawer()
    {
        _drawerOpen = !_drawerOpen;
        return Task.CompletedTask;
    }
}

4. 在布局中使用传递的RenderFragment #

在MainLayout.razor的导航菜单区域添加以下代码，渲染传递过来的导航内容：

@if (NavMenuContent != null)
{
    @NavMenuContent
}

完成后，所有页面都会自动获取到TeamName、TeamIcon和自定义导航菜单，无需在每个页面重复编写传递逻辑。

内容的提问来源于stack exchange，提问作者JakubTracz