Как мы можем отображать дочерний компонент при обновлении родительского компонента?

Question

Дочерний компонент создает поле на основе набора свойств объекта, который передается дочернему компоненту в качестве параметра. В приведенном ниже примере, как дочерний компонент может отображать динамически, когда любое из полей адреса изменяется в родительском? Спасибо за любые предложения!

Родительский компонент использует дочерний компонент, как показано ниже, и передает параметр 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
            }
        });

    }
}

Answer 1

Проблема здесь в том, что OnInitializedAsync вызывается только в первый раз, когда параметры устанавливаются в компоненте, вам нужно использовать OnParametersSet , который будет вызываться, когда:

OnParametersSetAsyn c или OnParametersSet вызываются:

• После инициализации компонента в OnInitializedAsyn c или 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
        }
    }
}