如何在Blazor中重新呈现来自另一个组件的组件? [英] How to re-render a component from another component in Blazor?
本文介绍了如何在Blazor中重新呈现来自另一个组件的组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个电子商务Blazor Server项目,我想在将商品从产品组件添加到购物车后重新呈现购物车组件。我尝试将Cart组件继承到Product组件,并运行Cart组件的公共方法来重新呈现其组件。
产品组件中的添加到购物车方法。
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未按我希望的方式重新呈现。
我认为当我运行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();
}
推荐答案
从购物车继承并不意味着您正在查看与项目中的"其他"购物车相同的实例。您正在继承购物车的类(定义),而不是正在运行的组件。
您有两种方法可以解决此问题:
使用公共父组件
- 将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中的视图
这篇关于如何在Blazor中重新呈现来自另一个组件的组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文