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

Question

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

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

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

Answer 1

您可以使用通知服务并将其注入到组件中。

public class NotifyService 
{
     public event Func<bool, Task> Notify;

     public async Task Notify(bool value) 
     {
        if (Notify is object)
        {
            await Notify.Invoke(value);
        }
     }
}

然后在 DI 容器中将其注册为单例（如果是服务器端，则为范围）并将其注入到您的组件中。

Answer 2

有几种方法可以做到：

1. 最丑的：如果你有两个模板，你可以简单地在页面/组件的顶部选择你想要使用的模板：

   @layout NoFooterLayoutName

2. 在模板中使用级联值（我会为您的场景推荐的内容）：

<CascadingValue Value="Footer">
    <Child />
</CascadingValue>

小提琴示例： https://blazorfiddle.com/s/05spcuyk

还有文档：https://docs.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-5.0

1. 创建状态服务并将其添加到启动范围内。带有footer bool 变量的状态服务，然后可以注入到使用的页面/组件和变量中：

在startup.cs的ConfigureService方法中：

services.AddScoped<AppState>();

在项目的某处创建 AppState.cs 类（最好是 Services 文件夹）：

public class AppState 
{
   public bool ShowFooter { get; set; }
   public event Action StateChanged;
   private void NotifyStateChanged() => StateChanged?.Invoke();
}

然后将其注入您的页面/组件中，以便您可以更改 ShowFooter 元素，并在您的模板中为触发 StateHasChanged() 创建事件处理程序（不确定是否有必要）：

@inject AppState _AppState;
@implements IDisposable
.
.
.
@code{
    protected override void OnInitialized()
    {
        _appState.StateChanged += StateChanged;
    }

    public void StateChanged()
    {
        StateHasChanged();
    }

    public void Dispose()
    {
        _appState.StateChanged -= StateChanged;
    }
}

Answer 3

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

public bool ShowFooter {get; set;}

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

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