如何在 Blazor 中引用通过 DynamicComponent 创建的组件？

Posted 2023-02-23

【中文标题】如何在 Blazor 中引用通过 DynamicComponent 创建的组件？

【英文标题】：how can I refer to a component created via DynamicComponent in Blazor?

【发布时间】：2021-08-14 01:58:17

【问题描述】：

我正在使用 DinamicComponent 渲染组件，我需要调用在子组件中找到的函数。 我找不到对 DinamicComponents 使用 @ref 的等价物，以便我可以引用来调用该函数。

这是父组件

 <div class="tab-content">
            @foreach (VerticalTabComponent.TabModel oneTabItem in VerticalTabsList)
            
                <div class="tab-pane fade show @(oneTabItem.TabIndex == SelectedTabIndex ? "active" : "")" @key=@($"VTabDivDynamic_TabPrefix_oneTabItem.TabIndex.ToString()")>
                    <DynamicComponent
                              Type=@System.Type.GetType(oneTabItem.TabComponent)
                              Parameters=@oneTabItem.TabParameters>
                    </DynamicComponent>
                </div>
            
        </div>

这是 Blazor 组件选项卡中的代码

 public partial class TabComponent

    [Parameter]
    public EventCallback<string> InsertUpdateCallback  get; set; 

    
    protected override async Task OnInitializedAsync()
    
       await CallAnyfunctionAsync();
    
    private async Task<bool> LoadDataGrid()
    
       //this is the function I need to call from parent
    

如何从父组件调用Load Grid函数？

【参考方案1】：

通常在 Blazor 中，我们使用 @Ref 来获取对组件的引用，但正如您所见，这不适用于 DynamicComponent。

解决此问题的方法是将[Parameter] 添加到名为Register 之类的组件中，这是一个将泛型类型设置为组件类型的操作。然后您可以添加代码来处理OnParametersSet 以在组件中调用此方法。

然后，您可以在 TabParameters 中添加一个 Register 参数，该参数会通过引用进行更新。

下面的示例代码将被添加到SurveyPrompt 组件中：

    /// <summary>
    ///  will be called when params set
    /// </summary>
    [Parameter] public  Action<SurveyPrompt> Register  get; set; 

    protected override void OnParametersSet()
    
        if (Register != null)
        
            // register this component
                Register(this);
        
    

您添加一个带有Action<type> 值的Register 参数。这是一个例子：

    SurveyPrompt sp1 = null;


    void Register1(SurveyPrompt survey)
    
        sp1 = survey;
        Console.WriteLine("SP1 has title " + sp1.Title);
    

    protected override void OnInitialized()
    
        Action<SurveyPrompt> p1 = Register1;

        params1 = new Dictionary<string, object>()
        
             "Title", "Survey Title Here" ,
             "Register", p1 
        ;
    

    IDictionary<string, object> params1;

【讨论】：

这很好，但是在您的示例代码中，SurveyPrompt 的含义很令人困惑？它代表父组件吗？还是一个单独的班级？