Blazor:从布局访问参数

问题描述

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

How can I access a page's route parameter from the layout?

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

I have a page that accepts a route parameter like the following:

@page /my-page/{Slug}

在共享布局中渲染标记时，我需要访问Slug的值.

I am needing to access the value of Slug when rendering markup in the shared layout.

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

I have tried implementing OnParametersSet in the layout file like the following, but the value is not set. It's only assigned at the page level.

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

推荐答案

经过一番摸索，我提出了以下解决方案.可能可以在.razor文件中完成所有操作，但是我在隐藏代码"文件中实现了一些混乱，以隐藏似乎很纠结的东西.

After some muddling around, I have come up with the following solution. It can probably all be done in the .razor files, but I implemented some of the mess in the "code behind" files to hide what seems to be a kludge.

在Layout实例中，如果您覆盖OnParametersSet，并深入研究Body.Target，您将找到RouteData，其中包含路线参数.然后，您可以将这些值传播到布局中的子组件.

In the Layout instance, if you override OnParametersSet, and drill into Body.Target you'll find the RouteData, containing the route parameter(s). You can then propagate these value(s) to the child components in the layout.

我们希望对版式可用的带有"Slug"参数的页面

@page "/mypage/{Slug}"

布局.razor文件

@inherits Components.MyLayoutBase

<div class="sidebar">
    <!-- Pass the Slug property to the NavMenu's Parameter -->
    <MyNavMenu Slug="@Slug" />
</div>

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

后面的布局代码

public class MyLayoutBase : LayoutComponentBase
{
    public string Slug { get; set; }

    protected override void OnParametersSet()
    {
        // pull out the "Slug" parameter from the route data
        object slug = null;
        if ((this.Body.Target as RouteView)?.RouteData.RouteValues?.TryGetValue("Slug", out slug) == true)
        {
            Slug = slug?.ToString();
        }
    }
}

导航菜单

<div class="top-row pl-4 navbar navbar-dark">
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="@($"/some-page/{Slug}/foo")">
                <span class="oi oi-home" aria-hidden="true"></span> Foo
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="@($"/some-page/{Slug}/bar")">
                <span class="oi oi-home" aria-hidden="true"></span> Bar
            </NavLink>
        </li>
    </ul>
</div>

@code {

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

    bool collapseNavMenu = true;

    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    string setupUrl = string.Empty;

    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

这篇关于Blazor:从布局访问参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！