Blazor：从布局访问参数

Question

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

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

@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; }
}

该值将自动填充。

Answer 2

经过一些混乱，我想出了以下解决方案。这可能都可以在.razor文件中完成，但我在“代码隐藏”文件中实现了一些混乱，以隐藏似乎是杂乱无章的东西。

在 Layout 实例中，如果您覆盖OnParametersSet, 并深入Body.Target查看，您会发现RouteData, 包含路由参数。然后，您可以将这些值传播到布局中的子组件。

带有我们希望提供给布局的“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>

后面的布局代码

@page "/mypage/{Slug}"

导航菜单

<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;
    }
}