12

我有一个简单的子 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永远不会更新。

似乎我必须在更新 Object ( StateHasChanged) 后强制刷新子对象，但不确定如何使用此示例执行此操作。

4

5 回答 5

6

你可以试试这个

孩子

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

<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();
   }
}
于 2020-02-07T17:14:28.027 回答
1

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

父组件：

<childCompoment param="@paramParent" />

子组件：

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

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

async Task Refresh(){}
于 2021-04-22T13:58:45.143 回答
1

由于<MyModal>有一个RenderFragment参数就足以调用StateHasChanged()父组件，它会重新计算并渲染所有带有父参数的子组件。

于 2020-04-10T06:42:53.227 回答
0

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

如果参数发生变化，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; }
    }

}
于 2021-08-10T11:16:57.277 回答
0

您可以只使用 CascadingParameter。

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

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

子组件：

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

之后，您只需在子组件中创建一个 OnParametersSetAsync 方法，并将您的值绑定到父组件中即可。在我的情况下，我将我的值绑定到数据网格行选择。

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

于 2021-10-21T19:26:03.577 回答