时间戳

首页 > 解决方案 > 如何将值从页面传递到 Blazor 中的布局？

blazor - 如何将值从页面传递到 Blazor 中的布局？

问题描述

我有一个布局 ( MainLayout.razor)，它有一个名为ShowFooter. 在某些页面上，我希望能够将该标志设置为true，而另一些页面则设置为false。

我还没有找到任何关于页面（即带有路由的组件）如何与其布局进行通信的明确说明。如何/应该在 Blazor 中做到这一点？

注意：您可能建议使用两种布局，一种有页脚，一种没有页脚，但这并不能真正解决我的问题，我希望能够在同一页面上的不同时间显示和隐藏页脚。另外，这只是需要在布局和页面之间进行通信的一种情况。还有无数其他的。

标签： blazorblazor-server-sideblazor-webassembly

解决方案

最简单的方法是在 MainLaout 组件中定义一个名为 ShowFooter 的公共布尔属性，如下所示：

public bool ShowFooter {get; set;}

并将 MainLaout 组件的引用级联到给定组件，方法是将标记包装在CascadingValue其 Value 属性设置为 的组件中this，如下所示：

@inherits LayoutComponentBase


<CascadingValue Value="this">
     <div class="sidebar">
        <NavMenu />
    </div>
    <div class="main">
         <div class="content px-4">
            @Body
        </div>
    </div>
</CascadingValue>
@code
{
    public bool ShowFooter {get; set;}

     protected override void OnInitialized()
    {
      // Put here code that checks the value of ShowFooter and acts in 
      // accordance with your dear wishes

     }
}

在 Index.razor 中的用法

@code{
     // Gets a reference to the MainLayout component
    [CascadingParameter]
    public MainLayout Layout { get; set; } 

    protected override void OnInitialized()
    {
        Layout.ShowFooter= true;
    
    }
}

推荐阅读