如何借助DynamicComponent的Instance属性实现IRefreshable接口

你的问题主要出在缺少接口定义、子组件未实现接口、父组件键名使用错误这几个点上，以下是分步修复方案：

1. 定义IRefreshable接口 #

首先需要创建统一的刷新接口，让所有需要刷新功能的组件遵循这个契约：

public interface IRefreshable
{
    void Refresh();
}

2. 子组件实现IRefreshable接口 #

修改你的TransactionCriteria子组件，显式实现该接口，同时确保StateHasChanged()被调用以更新UI：

public partial class TransactionCriteria : IRefreshable
{
    // 保留你的现有字段和逻辑...

    public void Refresh()
    {
        _windowVisible = true;
        TransactionDetailWindowRef.Refresh();
        StateHasChanged(); // 必须调用此方法触发UI更新
    }
}

3. 修正父组件的键名错误与调用逻辑 #

你在OnToolBarButtonClick中错误使用了字符串字面量"componentKey"，而非传入的变量componentKey，同时优化类型转换和空值判断逻辑：

private void OnToolBarButtonClick(string componentKey, SystemCategory systemCategory, TransactionCategory transactionCategory, MouseEventArgs Args)
{
    // 使用TryGetValue避免键不存在时的异常
    if (Components.TryGetValue(componentKey, out var componentDetails) && componentDetails.ComponentRef != null)
    {
        CurrentKey = string.Empty;

        // 安全转换为IRefreshable并调用刷新方法
        if (componentDetails.ComponentRef.Instance is IRefreshable refreshable)
        {
            refreshable.Refresh();
        }
        return; 
    }
 
    CurrentKey = componentKey;
    if (Components.TryGetValue(componentKey, out var details))
    {
        details.Parameters = new Dictionary<string, object>
        {
            ["SystemCategory"] = systemCategory,
            ["TransactionCategory"] = transactionCategory
        };
    }
}

4. 确认DynamicComponent引用绑定正确 #

你的父组件Razor代码已经正确绑定了@ref，DynamicInvokedComponentDetails类的定义无需修改：

public class DynamicInvokedComponentDetails 
{
    public required Type Component { get; set; }
    public DynamicComponent? ComponentRef { get; set; } = null;
    public Dictionary<string, object> Parameters { get; set; } = [];
}

现在点击工具栏按钮时：

• 若组件已加载，会直接调用子组件的Refresh方法更新UI
• 若组件未加载，会设置参数并渲染动态组件

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