.NET 8 Blazor静态渲染模式下组件向布局传递参数方法

针对你的需求，这里提供两种无需创建多布局变体的可行方案，均适用编译时确定的参数：

方案一：利用路由元数据传递 #

这种方式通过给路由组件添加自定义元数据属性，布局组件读取当前路由的元数据来应用设置，完全基于编译时配置，无需额外运行时逻辑：

1. 定义元数据类
   创建实现IRouteMetadata的类，存放需要传递的布局参数：

public class LayoutSettingsMetadata : IRouteMetadata
{
    public string BodyClass { get; set; } = string.Empty;
    public bool ShowHeader { get; set; } = true;
}

2. 在路由组件标记元数据
   在页面的@page指令下方添加自定义属性，指定编译时确定的参数值：

@page "/home"
@attribute [LayoutSettingsMetadata(BodyClass = "home-page-body", ShowHeader = false)]

<h1>首页</h1>

3. 布局组件读取元数据
   在布局中注入NavigationManager，获取当前路由的元数据并应用到UI：

@inherits LayoutComponentBase
@inject NavigationManager NavManager

@{
    var routeData = NavManager.GetRouteData();
    var layoutSettings = routeData?.Metadata.OfType<LayoutSettingsMetadata>().FirstOrDefault() 
                        ?? new LayoutSettingsMetadata();
}

<body class="@layoutSettings.BodyClass">
    @if (layoutSettings.ShowHeader)
    {
        <header class="site-header">网站头部</header>
    }
    <main class="content">@Body</main>
</body>

方案二：基类组件+级联参数 #

通过让路由组件继承统一的基类，基类定义布局参数，再通过级联参数传递给布局，适合需要在组件逻辑中统一处理的场景：

1. 创建带布局参数的基类组件

public class LayoutAwarePage : ComponentBase
{
    public LayoutSettings PageLayoutSettings { get; protected set; } = new();

    protected override void OnInitialized()
    {
        // 默认设置，子类可重写覆盖
        PageLayoutSettings.BodyClass = "default-body";
        PageLayoutSettings.ShowSidebar = true;
        base.OnInitialized();
    }
}

public class LayoutSettings
{
    public string BodyClass { get; set; } = string.Empty;
    public bool ShowSidebar { get; set; } = true;
}

2. 路由组件继承基类并设置参数

@inherit LayoutAwarePage
@page "/dashboard"

<h1>控制台</h1>

@code {
    protected override void OnInitialized()
    {
        PageLayoutSettings.BodyClass = "dashboard-body";
        PageLayoutSettings.ShowSidebar = false;
        base.OnInitialized();
    }
}

3. 布局组件接收级联参数
   在布局中通过级联参数获取页面的布局设置：

@inherits LayoutComponentBase
<CascadingValue Value="CurrentPageSettings">
    <body class="@CurrentPageSettings.BodyClass">
        @if (CurrentPageSettings.ShowSidebar)
        {
            <aside class="sidebar">侧边栏</aside>
        }
        <main>@Body</main>
    </body>
</CascadingValue>

@code {
    [CascadingParameter]
    public LayoutSettings CurrentPageSettings { get; set; } = new();
}

为什么共享服务方案无效？ #

静态渲染模式下，每个请求都是独立的服务器端预渲染流程，组件渲染完成后生命周期就结束，StateHasChanged无法触发已完成渲染的布局更新，因此共享服务的事件通知机制在这种场景下不适用。

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