Blazor：从页面更新布局的问题

Question

我想从 Pages 访问 MainLayout，以更新显示篮子中项目数量的值。

为此，我实现了 2 个不同的场景：

1. 根据this线程为Event创建调用MainLayout方法的级联参数
2. MainLayout的Cascase参数调用它们的公共方法（GetOrderCount）

两种情况都无法正常工作。查看示例代码：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    System.Console.WriteLine($"OnAfterRender: {basketNo}");
}

protected override bool ShouldRender()
{
    if (forceRerender)
    {
        forceRerender = false;
        return true;
    }
    return base.ShouldRender();
}

public async Task GetOrderCount()
{
    basketNo = await BasketService.GetCountOrdersAsync();
    await Task.Delay(1);
    forceRerender = true;
    StateHasChanged();
}

<div class="basket">
    <a class="btn btn-outline-light text-dark pos-relative" href="/Order">
        <i class="bi-basket-fill"></i>
        @if (basketNo > 0)
        {
            <span class="pos-absolute translate-middle badge rounded-pill @ccss">
                @basketNo
            </span>
        }
    </a>
</div>

在页面上，将商品添加到购物篮后，我从 MainLayout 调用 GetOrderCount 方法来更新购物篮编号。一切都会正常运行，没有任何问题。在 basketNo 更改后调用 OnAfterRender。但 UI 上的数据没有改变！

另一方面，如果我从 MainLayout 调用方法，例如按钮的 @onclick，它的工作和 basketNo 在 UI 上更新。 不知道Calling from Page 和Calling from on MainLayout 有什么区别！？

Answer 1

我假设您在 MainLayout 中显示购物篮数？

将BasketUpdated 事件编码为BasketService

public event EventHandler BasketUpdated;

并在购物篮更新时调用该事件。

this.BasketUpdated?.Invoke(this, EventArgs.Empty);

将 Basket Count 属性添加到链接到 BasketItems 列表的 BasketService。

public int BasketCount => this.BasketItems.Count;

为标题中代表篮子的任何标记创建一个小组件。让我们称之为BasketCountComponent。将BasketService 注入BasketCountComponent。在连接到BasketService.BasketUpdated 的BasketCountComponent 中注册一个事件处理程序。将BasketCountComponent 中的标记直接链接到注入的 `BasketService.BasketCount' 属性。

组件应如下所示：

@implements IDisposable

<div>BasketCount : @basketService.BasketCount</div>

@code {
[Inject] private BasketService basketService {get; set;}

protected void OnInitialized()
  => basketService.BasketChanged += this.OnBasketChanged;

private void OnBasketChanged(object sender, EventArgs e)
  => StateHasChanged();

public void Dispose()
  => basketService.BasketChanged -= this.OnBasketChanged;
}

如果您想查看类似内容的工作版本，请查看我的Notification Service Demo Repo on Github

PS 我没有实际运行过这段代码，所以可能有一些拼写错误！