Blazor中如何通过父组件批量调用子组件的ClearFiles方法？

问题背景 #

子组件CompFileFilter已实现ClearFiles(string PathName)方法，可通过子组件内部按钮触发。现在需要在父组件PageFileCleaner的ForceClean按钮点击时，批量调用所有已渲染的CompFileFilter子组件的该方法。

父组件原有渲染子组件的代码：

@foreach (var d in filters)
{
     <CompFileFilter FileFilter="@d" OnDelete="Delete" ></CompFileFilter>
}

父组件中filters集合的定义与初始化：

private List<FileFilter> filters { get; set; }

// 初始化逻辑
using var context = _db.CreateDbContext();
filters = await context.FileFilters.AsNoTracking().ToListAsync();

子组件接收参数的代码：

[Parameter]
public FileFilter FileFilter { get; set; }

// 子组件已实现的清理方法
public void ClearFiles(string PathName)
{
    // 原有文件清理逻辑
}

解决方案 #

1. 父组件维护子组件实例集合 #

在父组件中声明一个集合，用于存储所有渲染完成的CompFileFilter子组件实例：

private List<CompFileFilter> _fileFilterComponents = new List<CompFileFilter>();

2. 绑定子组件实例引用 #

修改foreach渲染逻辑，通过@ref指令将每个子组件实例存入集合：

@foreach (var d in filters)
{
     <CompFileFilter @ref="componentRef" FileFilter="@d" OnDelete="Delete" />
}

@code {
    // 临时变量接收单个子组件实例
    private CompFileFilter componentRef { 
        set {
            if(value != null)
            {
                _fileFilterComponents.Add(value);
            }
        }
    }
}

3. 实现批量调用逻辑 #

在父组件的ForceClean按钮点击事件中，遍历子组件集合，调用每个实例的ClearFiles方法：

<button @onclick="ForceCleanAll">ForceClean</button>

@code {
    private void ForceCleanAll()
    {
        foreach(var component in _fileFilterComponents)
        {
            // 从子组件绑定的FileFilter参数中获取路径
            component.ClearFiles(component.FileFilter.PathName);
        }
    }
}

4. 可选：清理资源避免内存泄漏 #

如果父组件会动态更新filters集合（比如增删子组件），需在参数更新或组件销毁时清理旧的子组件引用：

protected override void OnParametersSet()
{
    // 参数更新时清空旧组件引用
    _fileFilterComponents.Clear();
}

public void Dispose()
{
    _fileFilterComponents.Clear();
}

注意事项 #

• 子组件的ClearFiles方法必须是public修饰，父组件才能访问调用
• 原有代码中<CompFileFilter FileFilter="d"需改为@d，否则会传递字符串"d"而非集合中的对象

内容的提问来源于stack exchange，提问作者nathan10802