每当父组件更新时,我们如何呈现子组件?

时间:2020-06-18 19:02:47

标签: blazor blazor-client-side

child组件基于作为参数传递给child的对象的一组属性构造一个字段。在下面的示例中,当父级中的任何地址字段发生更改时,子级组件如何动态呈现?感谢您的任何建议!

父组件使用以下子组件,并传递参数parentObj

父项:

<Child ChildObj="@parentObj" />

子组件:

<div class="col-8 flex-wrap">
    @Address
</div>

@code {

[Parameter]
public Person ChildObj { get; set; }

public string Address { get; set; }


 protected override async Task OnInitializedAsync()
    {
        await Task.Run(() => { 
            if (ChildObj != null)
            {
                Address = ChildObj.Address1 + " " + ChildObj.Address2 + " " + ChildObj.City + " " + ChildObj.State + " " + ChildObj.Zip
            }
        });

    }
}

1 个答案:

答案 0 :(得分:2)

这里的问题是OnInitializedAsync仅在组件中第一次设置参数时被调用,您需要使用OnParametersSet,它将在以下情况下被调用:

OnParametersSetAsync或OnParametersSet称为:

  • 在OnInitializedAsync或OnInitialized中初始化组件之后。
  • 父组件重新提供和供应时: 只有已知的基本不变类型,其至少一个参数已更改。 任何复杂类型的参数。该框架无法知道复杂类型参数的值是否在内部发生了突变,因此将参数集视为已更改。
<div class="col-8 flex-wrap">
    @Address
</div>

@code {

    [Parameter]
    public Person ChildObj { get; set; }

    public string Address { get; set; }

    // using OnParametersSet
    protected override void OnParametersSet()
    {
        if (ChildObj != null)
        {
            Address = ChildObj.Address1 + " " + ChildObj.Address2 + " " + ChildObj.City + " " + ChildObj.State + " " + ChildObj.Zip
        }
    }
}