如何从 Blazor 中的另一个组件重新渲染一个组件？

问题描述

我有一个电子商务 Blazor 服务器 项目，我想在从 产品组件 向购物车添加商品后重新渲染 购物车组件强>。我尝试将 Cart 组件继承到 Product 组件并运行 Cart 组件的公共方法来重新渲染其组件。

产品组件中的添加到购物车方法。

产品.Razor

 public async Task AddToCart()
{
    //The adding logic in this area

    StateHasChanged();
    Reload(); // this method is inherited from the Cart Component trying to re-render the Cart Component
    //Does not work
}

Cart.Razor

[Parameter]
public List<Models.Cart> CartItem { get; set; }

protected override void OnInitialized()
{
    CartItem = _context.Cart.Where(i => i.CustomUserId == _userManager.GetUserId(_httpContextAccessor.HttpContext.User) && !i.IsSold).ToList();
}


public void Reload()
{

    OnInitialized();
    StateHasChanged();

}

该方法成功运行，但 UI 没有按照我想要的方式重新渲染。

我是否会在运行 OnInitialized() 方法和 StateHasChanged() 时重新呈现 UI？

谢谢。

编辑：我更新了我的 Reload() 方法并在 AddToCart() 方法的末尾调用它，但它不起作用:(

Cart.Razor

 protected override void OnParameteRSSet()
{
    CartItem = _context.Cart.Where(i => i.CustomUserId == _userManager.GetUserId(_httpContextAccessor.HttpContext.User) && !i.IsSold).ToList();
}


public void Reload()
{
    OnParameteRSSet(); //updated but still not working
    StateHasChanged();

}

产品.Razor

public async Task AddToCart()
    {
        //The adding logic in this area

        Reload(); // this method is inherited from the Cart Component trying to re-render the Cart Component
        //Does not work
        StateHasChanged();
    }

解决方法

从 Cart 继承并不意味着您正在查看与项目中的“其他”购物车相同的实例。您继承的是 Cart 类（定义），而不是正在运行的组件。

您有两种方法可以解决此问题：

使用公共父组件

将 Product.razor 和 Cart.razor 作为公共父组件的子组件。
在 Product.razor 中，将商品添加到购物车后引发 OnItemAdded 之类的事件。
在父组件中捕获此事件
从父组件对正在运行的购物车组件的实例调用 Reload()。（请参阅组件的 @ref 属性 - https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/passing-html-element-references/）。

使用事件广播

创建事件广播服务 (https://morioh.com/p/a5df9450ff5e)
在 Product.razor 中，将商品添加到购物车后，广播一条消息。
在 Cart.razor 中收听该消息
收到消息后更新 Cart.razor 中的视图

asp.net-blazor blazor blazor-server-side