Blazor组件：从子组件更新模型时刷新父组件

Question

我在ASP.NET Core 3预览版4中使用服务器端Blazor组件。

我有一个父组件和子组件，使用相同的共享模型，如下所示：

型号：

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; }
}

它与父母和孩子使用的模型的实例相同。从父级更新模型时，两者都显示正确的递增值。从子项更新后，只有子项显示正确的值。

如何从子项更新父组件时强制刷新父组件？

注意，这里我有一个更新模型的函数，但我希望解决方案在数据绑定到输入时工作。

Answer 1

创建共享服务。在父级中订阅服务的“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();
}

Answer 2

@glacasa，级联参数流向下。要刷新父级，您需要提供子组件可以调用的回调，并传递一些值。我已经在Blazor部分这里展示了如何在父组件上创建回调，以及如何触发回调，传递一个值...

希望这可以帮助...