Blazor (剃刀组件)从父组件刷新子组件

Question

我有一个简单的子Blazor组件(MyModal)，如下所示：

<div class="modal">
    <h3>@Title</h3>
    @BodyTemplate
</div>

@code
{
    [Parameter] string Title { get; set; }
    [Parameter] RenderFragment BodyTemplate { get; set; }
}

在我的父组件中，我这样调用它：

<MyModal Title="Super Cool Modal">
        <BodyTemplate>
            @MyObject.Name
        </BodyTemplate>
</MyModal>

public MyObject MyObject { get; set; } = new MyObject();

稍后，在页面初始呈现后，我更新了MyObject，但是引用@MyObject.Name的子组件本身从不更新。

似乎我必须在更新对象(StateHasChanged)后强制刷新该子对象，但不确定如何在本例中做到这一点。

Answer 1

你可以试试这个

子

创建可从父级调用的公共刷新方法

<div class="modal">
    <h3>@Title</h3>
    @BodyTemplate
</div>

@code
{
    [Parameter] string Title { get; set; }
    [Parameter] RenderFragment BodyTemplate { get; set; }

    public void RefreshMe()
    {
        StateHasChanged();
    }
}

父

调用子刷新方法

<MyModal Title="Super Cool Modal"
         @ref="ChildComponent">
        <BodyTemplate>
            @MyObject.Name
        </BodyTemplate>
</MyModal>
@code
{
   public MyObject MyObject { get; set; } = new MyObject();
   protected UploadDownloadComponent ChildComponent;

   //Call this method to update the child
   private void Change(TreeEventArgs args)
   {
       ChildComponent.RefreshMe();
   }
}

Answer 2

由于<MyModal>有一个RenderFragment参数，在父组件上调用StateHasChanged()就足够了，它将重新计算并呈现所有带有父组件参数的子组件。

Answer 3

您可以对子组件执行"OnParametersSetAsync()“：

父组件：

<childCompoment param="@paramParent" />

子组件：

[Parameter]
public string param{get;set;}

protected override async Task OnInitializedAsync(){await Refresh();}

async Task Refresh(){}