Компонент Blazor: обновление родительского элемента при обновлении модели из дочернего компонента. - PullRequest
Новая
       49

Компонент Blazor: обновление родительского элемента при обновлении модели из дочернего компонента.

0 голосов
/ 20 апреля 2019

Я использую серверные компоненты Blazor в ASP.NET Core 3 preview 4.

У меня есть родительский компонент и дочерние компоненты, использующие одну и ту же общую модель, например:

Модель: 

public class CountModel
{
    public int Count { get; set; }

    public void Increment()
    {
        Count++;
    }
}

Родительский компонент: 

@page "/count"

<CascadingValue Value="currentCount">
    <h1>Count parent</h1>

    <p>Current count is : @currentCount.Count</p>

    <button class="btn btn-primary" onclick="@currentCount.Increment">+1 from parent</button>

    <CountChild></CountChild>
</CascadingValue>

@functions {
    private CountModel currentCount = new CountModel();
}

Дочерний компонент: 

<h1>Count child</h1>

<p>Current count is : @currentCount.Count</p>

<button class="btn btn-primary" onclick="@currentCount.Increment">+1 from child</button>


@functions {
    [CascadingParameter]
    private CountModel currentCount { get; set; }
}

Это тот же экземпляр модели, который используется для родителя и ребенка. Когда модель обновляется от родительского, оба отображают правильное увеличенное значение. Когда он обновляется от дочернего, только дочерний элемент отображает правильное значение.

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

Обратите внимание, здесь у меня есть функция для обновления модели, но я бы хотел, чтобы решение работало, когда данные привязаны к входу.

Ответы [ 2 ]

0 голосов
/ 22 апреля 2019

Создать общий сервис. Подпишитесь на событие «RefreshRequested» службы в родительском и Invoke () от дочернего. В родительском методе вызов StateHasChanged (); 

public interface IMyService
{
 event Action RefreshRequested;
 void CallRequestRefresh;
 }

public class MyService: IMyService
{
    public event Action RefreshRequested;
    public void CallRequestRefresh()
    {
         RefreshRequested?.Invoke();
    }
}


//child component
MyService.CallRequestRefresh();


//parent component
MyService.RefreshRequested += RefreshMe;

private void RefreshMe()
{
    StateHasChanged();
}
0 голосов
/ 20 апреля 2019

@ glacasa, поток параметров каскадирования вниз.Для обновления вашего родителя вы хотите предоставить обратный вызов, который может вызвать дочерний компонент, передав ему некоторое значение.В разделе Blazor я уже показал, как создать обратный вызов для родительского компонента и как вызвать обратный вызов, передав ему значение ...

Надеюсь, это поможет ...

...