Blazor（Razor 组件）从父组件刷新子组件答案

【问题标题】：Blazor (Razor Components) Refresh Child Component from Parent ComponentBlazor（Razor 组件）从父组件刷新子组件
【发布时间】：2019-11-15 12:45:31
【问题描述】：

我有一个简单的 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) 后强制刷新子对象，但不知道如何使用此示例执行此操作。

【问题讨论】：

标签： razor-pages blazor blazor-server-side razor-components

【解决方案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();
   }
}

【讨论】：

值得注意的是，如果您从 ComponentBase 派生出您自己的 MyComponentBase，您可以将 RefreshMe() 方法添加到 MyComponentBase。然后，您可以从 MyComponentBase 继承任何自定义组件，并且您将能够调用 RefreshMe()。它的 DRY —— 可以说比将 RefreshMe() 添加到每个需要它的组件中更好。

【解决方案2】：

由于<MyModal> 有一个RenderFragment 参数，在父组件上调用StateHasChanged() 就足够了，它会使用父组件的参数重新计算和渲染所有子组件。

【讨论】：

【解决方案3】：

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

父组件：

<childCompoment param="@paramParent" />

子组件：

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

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

async Task Refresh(){}

【讨论】：

【解决方案4】：

我得到了一个不同的示例，其中包含一个必须序列化为表单模型的复杂参数对象。

OnParametersSetAsync() 会在参数改变时更新子组件。

我们需要使用@bind-Job="_job" 绑定子参数

家长：

<div class="tab-pane active" id="kt_job_tab_1">
    <JobEdit @bind-Job="_job"></JobEdit>
</div>

@code
{
    private Job _job;

    protected override async Task OnInitializedAsync()
    {
        _job = await GetJob();

        await base.OnInitializedAsync();
    }

}

孩子：

<EditForm Model="@_model" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group row">
        <label class="col-xl-3 col-lg-3 col-form-label text-sm-left text-lg-right">Title</label>
        <div class="col-lg-9 col-xl-6">
            <InputText @bind-Value="_model.JobTitle" class="form-control form-control-solid form-control-lg" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-xl-3 col-lg-3 col-form-label text-sm-left text-lg-right">Department</label>
        <div class="col-lg-9 col-xl-6">
            <InputText @bind-Value="_model.Department" class="form-control form-control-solid form-control-lg" />
        </div>
    </div>
</EditForm>

@code {

    [Parameter]
    public Job Job { get; set; }

    [Parameter]
    public EventCallback<Job> JobChanged { get; set; }

    private Model _model;

    protected override async Task OnInitializedAsync()
    {
        InitializeModel();

        await base.OnInitializedAsync();
    }

    //THIS WILL UPDATE MODEL IF PARENT CHANGES
    protected override async Task OnParametersSetAsync()
    {
        InitializeModel();

        await base.OnParametersSetAsync();
    }

    private async void HandleValidSubmit()
    {
        //WE CODE HERE
        //THEN

        //THIS UPDATES PARENT IF CHILD JOB CHANGES
        await JobChanged.InvokeAsync(Job); 

        StateHasChanged();
    }

    private void InitializeModel()
    {
        _model = new Model
        {
            JobIdentifier = Job.Identifier,
            JobTitle = Job.JobTitle,
            Department = Job.Department
        };
    }

    private class Model
    {
        [Required]
        public string JobIdentifier { get; set; }

        [Required]
        public string JobTitle { get; set; }

        [Required]
        public string Department { get; set; }
    }

}

【讨论】：

【解决方案5】：

你可以只使用 CascadingParameter。

在您的父组件中，只需像这样调用子组件：

<CascadingValue Value="selectedChats[0].Id" Name="chatID">
     <AdminChatComponent> </AdminChatComponent>
</CascadingValue>

子组件：

[CascadingParameter(Name ="chatID")]
public string chatID { get; set; }

之后，您只需在子组件中创建一个 OnParametersSetAsync 方法，然后在父组件中绑定您的值。就我而言，我将我的值绑定到数据网格行选择。

之后，每当父组件上的绑定值发生变化时，您的子组件也会触发 OnParametersSetAsync 方法。

【讨论】：