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

Posted

技术标签:

【中文标题】如何从 Blazor 中的另一个组件重新渲染一个组件?【英文标题】:How to re-render a component from another component in Blazor? 【发布时间】:2021-08-17 05:04:38 【问题描述】:

我有一个电子商务 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

购物车.剃刀

[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() 方法的末尾调用它,但它不起作用:(

购物车.剃刀

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

【问题讨论】:

您提供的代码没有为我提供有关您如何呈现这些组件的足够信息。他们在同一页上吗?您的购物车控件在主布局上吗?你让一个人成为另一个人的孩子吗? 【参考方案1】:

从购物车继承并不意味着您正在查看与项目中的“其他”购物车相同的实例。您继承的是 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 中的视图

【讨论】:

以上是关于如何从 Blazor 中的另一个组件重新渲染一个组件?的主要内容,如果未能解决你的问题,请参考以下文章

Blazor 重新渲染组件块元素 [关闭]

如何在 Blazor 中保留组件实例

Blazor 服务器端 SPA:重新加载组件后的组件状态

使用参数渲染 Blazor 子组件

从反应中的另一个组件更新组件

双向绑定和后台更新不重新渲染组件