如何解决如何从 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 中的视图
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。