blazor如何将组件中的变量值传递给MainLayout组件

Question

我使用vs 2019自带的blazor服务器模板创建了一个项目，我如何在计数器中传递currentCount属性值。razor组件放到MainLayout中。剃须刀组件?

当页面被加载时，在Mainlayout组件中传递的currentCount值与Counter组件中的currentCount值相同。当currentCount值改变时，Mainlayout中的currentCount值也会改变。

MainLayout.razor:

@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4 auth">
<LoginDisplay />
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>

Counter.razor

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}

Answer 1

我相信你正在寻找级联参数。级联值和参数是一种将一个值从一个组件传递给它的所有后代的方法，而不必使用传统的组件参数。

https://learn.microsoft.com/en - us/aspnet/core/blazor/components/cascading -值-和- parameters?view=aspnetcore - 5.0

级联值的来源示例将级联到所包含的组件。

<CascadingValue Value="@CurrentCount">
@Body
</CascadingValue>
@code{
int CurrentCount = 5;
}

内部组件应该像下面这样装饰它的属性。

[CascadingParameter] int CurrentCount { get; set; }

Answer 2

一种方法是使用状态服务。

在项目中添加一个类MainLayoutState.cs

public class MainLayoutState
{
int currentCount;
public int CurrentCount
{
get => currentCount;
set
{
if (currentCount == value) return;
currentCount = value;
CurrentCountChanged?.Invoke(this, value);
}
}
public event EventHandler<int> CurrentCountChanged;
}

更新Startup.cs，使其可以被注入。

services.AddScoped<MainLayoutState>();

在布局和计数器组件中使用它。

MainLayout.razor

@inherits LayoutComponentBase
@implements IDisposable
@inject MainLayoutState LayoutState
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
<LoginDisplay /> @LayoutState.CurrentCount
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>
@code {
protected override void OnInitialized()
=> LayoutState.CurrentCountChanged += CountChanged;
void CountChanged(object sender, int e) => StateHasChanged();
public void Dispose() => LayoutState.CurrentCountChanged -= CountChanged;
}

修改Counter.razor中的代码块

@code {
int CurrentCount { 
get => LayoutState.CurrentCount; 
set => LayoutState.CurrentCount = value; }
[Inject]
MainLayoutState LayoutState { get; set; }
void IncrementCount()
{
CurrentCount++;
}
}