Blazor技术问题：如何从Product页面更新MainLayout中的StickyMenu组件？

我有一个包含<StickyMenu>组件和@Body组件的MainLayout，代码如下：

<header>
  <StickyMenu></StickyMenu>
</header>

<main>
  <Loader Loading=@IsLoading></Loader>
  @Body
</main>

在填充@Body部分的Product页面中，当商品被添加到购物车时，我需要更新StickyMenu组件。以下是Product.razor.cs中的代码：

public async void AddToCart()
{
     //add to cart code
     *** HERE I NEED TO UPDATE StickyMenu component ***
}

请问该如何实现？

推荐用共享状态服务的方式，这是Blazor中跨组件通信最常用也最可靠的方案，另外也提供布局传参的备选方案。

方案1：全局购物车状态服务（推荐） #

通过一个单例服务维护购物车状态，让StickyMenu和Product都依赖这个服务，状态变更时自动通知组件刷新。

1. 创建购物车服务 #

public class CartService
{
    // 购物车商品数量，可根据实际需求扩展字段
    public int CartItemCount { get; private set; }

    // 状态变更事件，购物车数据变化时触发
    public event Action OnCartUpdated;

    // 添加商品的方法，可根据实际业务逻辑修改
    public void AddToCart()
    {
        CartItemCount++;
        // 通知所有订阅了该事件的组件
        OnCartUpdated?.Invoke();
    }
}

然后在Program.cs里把服务注册为单例：

builder.Services.AddSingleton<CartService>();

2. 修改StickyMenu组件监听状态 #

注入服务并订阅事件，状态变化时触发组件重新渲染：

@inject CartService CartService
@implements IDisposable

<div class="sticky-menu">
    购物车：@CartService.CartItemCount 件商品
</div>

@code {
    protected override void OnInitialized()
    {
        // 订阅购物车变更事件
        CartService.OnCartUpdated += RefreshMenu;
    }

    private void RefreshMenu()
    {
        // 通知组件重新渲染
        InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        // 组件销毁时取消订阅，避免内存泄漏
        CartService.OnCartUpdated -= RefreshMenu;
    }
}

3. 在Product页面调用服务更新状态 #

注入服务，在AddToCart里调用服务的方法：

public class ProductBase : ComponentBase
{
    [Inject]
    protected CartService CartService { get; set; }

    public async void AddToCart()
    {
        // 原有添加到购物车的业务代码
        // ...

        // 调用服务更新购物车状态，自动触发StickyMenu刷新
        CartService.AddToCart();
    }
}

方案2：通过布局组件中转（适合小型项目） #

如果不想用全局服务，可以借助MainLayout作为中间层，让Product页面调用布局的方法刷新StickyMenu。

1. 修改MainLayout获取StickyMenu引用 #

@inherits LayoutComponentBase

<header>
  <StickyMenu @ref="_stickyMenu"></StickyMenu>
</header>

<main>
  <Loader Loading=@IsLoading></Loader>
  @Body
</main>

@code {
    private StickyMenu _stickyMenu;

    // 提供给子页面调用的刷新方法
    public void RefreshStickyMenu()
    {
        _stickyMenu.TriggerRefresh();
    }
}

2. 给StickyMenu添加刷新方法 #

<div class="sticky-menu">
    <!-- 你的菜单内容 -->
</div>

@code {
    public void TriggerRefresh()
    {
        // 重新加载数据或直接触发组件渲染
        StateHasChanged();
    }
}

3. 在Product页面调用布局的刷新方法 #

通过CascadingParameter获取布局实例：

public class ProductBase : ComponentBase
{
    [CascadingParameter]
    protected MainLayout CurrentLayout { get; set; }

    public async void AddToCart()
    {
        // 原有添加逻辑
        // ...

        // 调用布局的方法刷新StickyMenu
        CurrentLayout.RefreshStickyMenu();
    }
}

内容的提问来源于stack exchange，提问作者Martina