如何在Blazor中重新呈现来自另一个组件的组件？ [英] How to re-render a component from another component in 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()？

时，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();

}

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

推荐答案

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

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

使用公共父组件

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. 收到该邮件时更新Cart.razor中的视图

这篇关于如何在Blazor中重新呈现来自另一个组件的组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！