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

Question

我有一个电子商务Blazor服务器项目，在从产品组件向购物车添加项目后，我想重新呈现

购物车组件产品组件中的Add to cart方法。

产品。剃刀

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

产品。剃刀

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

Answer 1

从Cart继承并不意味着您在项目中看到的是与"其他"Cart相同的实例。您继承的是Cart类(的定义(，而不是正在运行的组件。

你有两种方法来解决这个问题：

使用通用父组件

1. 将Product.razor和Cart.razor作为通用父组件的子组件
2. 在Product.razor中，将项目添加到购物车后，会引发一个类似OnItemAdded的事件
3. 在父组件中捕获此事件
4. 从父组件调用正在运行的Cart组件的实例上的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. 收到该消息后，更新Cart.razor中的视图