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

Question

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

编辑：这是我的 table 组件（子）：

@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

您需要使用事件。您需要创建共享服务。在父组件和子组件的 Invoke() 中订阅服务的 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();
}

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

Blazor update child component when parent is updated

blazor

blazor-webassembly