Blazor在更新父组件时更新子组件

Question

在Blazor中，在客户端，我有一个页面，它有一个项目列表，以及一个将该项目列表作为参数的自定义表组件。但是，当我更新页面上的项目列表(删除项目(时，更改不会反映在表中(子组件(。当父组件中的基础数据集合发生更改时，如何触发子组件的更新？

编辑：这是我的表组件(子(：

@typeparam TableItem
<CascadingValue Value="this">
<Table>
<TableHeader>
<TableRow>
@CustomTableHeader
</TableRow>
</TableHeader>
<TableBody>
@foreach (var item in Items)
{
<TableRow>
@CustomTableRow(item)
</TableRow>
}
</TableBody>
</Table>
</CascadingValue>
@functions {
[Parameter]
public List<TableItem> Items { get; set; }  

//different methods

private void Refresh()
{
InvokeAsync(() =>
{
StateHasChanged();
});
}
}

这就是我从页面(父组件(使用它的方式：

<CustomTable Items="_myItems">
<CustomTableHeader>
<CustomTableCell TableItem="MyType" Name="ItemName1" >Item Name1</CustomTableCell>
<CustomTableCell TableItem="MyType" Name="ItemName2" >Item Name2</CustomTableCell>
</CustomTableHeader>
<CustomTableRow>
<TableRowCell>@(context.ItemName1)</TableRowCell>
<TableRowCell>@(context.ItemName2)</TableRowCell>
</CustomTableRow>
</CustomTable>
@code
{
private string List<MyType> _myItems = new();

private void DeleteItem(string identifier)
{
//deleteItem code
}
}

Answer 1

您需要使用事件。您需要创建一个共享服务。订阅父组件中的服务的Update事件，并从子组件中调用((。在父方法中，调用StateHasChanged((；

public interface IMyService
{
event Action Update;
void CallUpdate();
}
public class MyService: IMyService
{
public event Action Update;
public void CallUpdate()
{
Update?.Invoke();
}
}

//child component
MyService.CallRequestRefresh();

//parent component
MyService.CallUpdate += UpdateMe;
private void UpdateMe()
{
StateHasChanged();
}