Blazor:从布局访问参数

Question

如何从布局访问页面的route参数？

我有一个页面，该页面接受如下所示的route参数:

@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 :-/
    }
}

Answer 1

您可以通过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; }
}

该值将自动填充。