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

How to re-render a component from another component in Blazor?

我有一个电子商务 Blazor 服务器 项目,我想在将商品添加到购物车后重新呈现 购物车组件 产品组件。我尝试将 Cart 组件继承到 Product 组件和 运行 Cart 组件的 public 方法来重新呈现其组件。

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

Product.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 没有按照我想要的方式重新呈现。

虽然 UI 会在 运行 OnInitialized() 方法和 StateHasChanged()?

时重新呈现

谢谢。

编辑: 我更新了我的 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();

}

Product.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 继承并不意味着您在项目中查看与 'other' 购物车相同的实例。您正在继承 class 购物车(的定义),而不是 运行 组件。

您有两种解决方法:

使用通用父组件

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

使用事件广播

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