如何在Blazor的ChildPage.razor中获取MainLayout.razor的参数当前值

方案1：通过级联参数传递单个值 #

这是最轻量化的实现方式，直接在布局层把需要的参数向下级联到所有子页面：

1. 修改MainLayout.razor，用<CascadingValue>包裹页面渲染节点@Body，绑定要传递的参数：

@inject SomeService SomeService

<CascadingValue Value="SomeParameter" Name="MainLayoutSomeParameter">
    @* 原有布局代码 *@
    @Body
</CascadingValue>

@code
{
    [Parameter] public string SomeParameter { get; set; }

    protected override async Task OnInitializedAsync()
    {
        SomeParameter = SomeService.GetData();
    }
}

这里Name参数可以省略，如果你整个链路里同类型的级联参数只有一个的话，加Name是为了避免匹配冲突。

2. 在ChildPage.razor里声明级联参数接收即可：

@page "/childpage"

@* 原有页面代码 *@

@code
{
    private string someParameter;

    [CascadingParameter(Name = "MainLayoutSomeParameter")]
    public string ReceivedSomeParameter { get; set; }

    protected override void OnParametersSet()
    {
        // 建议在OnParametersSet里取值，避免异步赋值导致初始化时拿不到值
        someParameter = ReceivedSomeParameter;
    }
}

方案2：级联整个MainLayout实例（适合需要取多个布局参数的场景） #

如果后续需要从布局拿多个参数，不需要逐个加级联值，直接把布局实例传递下去即可：

1. 修改MainLayout.razor的级联值为当前实例：

@inject SomeService SomeService

<CascadingValue Value="this">
    @* 原有布局代码 *@
    @Body
</CascadingValue>

@code
{
    [Parameter] public string SomeParameter { get; set; }
    // 其他你需要传递的布局参数...

    protected override async Task OnInitializedAsync()
    {
        SomeParameter = SomeService.GetData();
    }
}

2. 子页面直接接收布局实例，访问对应属性即可：

@page "/childpage"

@* 原有页面代码 *@

@code
{
    private string someParameter;

    [CascadingParameter]
    public MainLayout CurrentLayout { get; set; }

    protected override void OnParametersSet()
    {
        someParameter = CurrentLayout.SomeParameter;
        // 也可以直接访问布局的其他公开属性
    }
}

注意事项 #

如果SomeParameter会在布局加载完成后动态更新，确保更新后调用StateHasChanged()，级联值会自动同步到所有子页面，不需要额外操作。

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