时间戳

首页 > 解决方案 > Blazor：从布局访问参数

blazor - Blazor：从布局访问参数

问题描述

如何从布局中访问页面的路由参数？

我有一个接受如下路由参数的页面：

@page /my-page/{Slug}

我需要访问Slug在共享布局中呈现标记时的值。

我尝试OnParametersSet在布局文件中实现如下所示，但未设置该值。它仅在页面级别分配。

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
            @this.Slug   <<<<------ display the parameter
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

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

    protected override void OnParametersSet()
    {
        // Slug is always null :-/
    }
}

标签： blazorblazor-server-side

解决方案

您可以通过 CascadingParameters 使 RouteData 可用于所有组件。在您的 App.razor 中，执行以下操作：

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <CascadingValue Value="@routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MyLayout)" />
        </CascadingValue>
    </Found>
</Router>

然后，在需要 RouteData 的所有组件中，只需添加：

@code
{
    [CascadingParameter]
    RouteData RouteData { get; set; }
}

该值将自动填充。

推荐阅读