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

我使用VS2019附带的blazor服务器模板创建了一个项目，如何将Counter.razor组件中的currentCount属性值传递给MainLayout.razor组件

加载页面时，在Mainlayout组件中传递的currentCount值与计数器组件中的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>

@继承LayoutComponentBase
@身体

柜台剃须刀

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

@page”/counter
柜台
当前计数：@currentCount

点击我
@代码{
私有int currentCount=0；
私有void IncrementCount（）
{
currentCount++；
}
}

我相信您正在寻找级联参数。级联值和参数是一种将值从组件传递到其所有子代的方法，而无需使用传统的组件参数

级联值的原点示例将级联到包含的组件

@身体
@代码{
int CurrentCount=5；
}

然后，内部组件应按照以下方式装饰其属性

[CascadingParameter]int CurrentCount{get；set；}

我相信您正在寻找级联参数。级联值和参数是一种将值从组件传递到其所有子代的方法，而无需使用传统的组件参数

级联值的原点示例将级联到包含的组件

@身体
@代码{
int CurrentCount=5；
}

然后，内部组件应按照以下方式装饰其属性

[CascadingParameter]int CurrentCount{get；set；}

一种方法是使用国家服务

将类添加到项目中

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

在布局和计数器剃须刀组件中使用它

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

@code {

    int CurrentCount { 
        get => LayoutState.CurrentCount; 
        set => LayoutState.CurrentCount = value; }

    [Inject]
    MainLayoutState LayoutState { get; set; }

    void IncrementCount()
    {
        CurrentCount++;
    }

}

---

一种方法是使用国家服务

将类添加到项目中

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

在布局和计数器剃须刀组件中使用它

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

@code {

    int CurrentCount { 
        get => LayoutState.CurrentCount; 
        set => LayoutState.CurrentCount = value; }

    [Inject]
    MainLayoutState LayoutState { get; set; }

    void IncrementCount()
    {
        CurrentCount++;
    }

}