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

Question

我正在使用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函数？

Answer 1

有一个简单的解决方案。不确定这是否是新的，但DynamicComponent的ref属性确实存在！你可以这样使用它：

<DynamicComponent Type="typeof(MyComponent)" Parameters="@MyParameters" @ref="dc" />

和在代码背后：

private DynamicComponent? dc;
private MyComponent? MyComponentRef
{
get
{
return (MyComponent?)dc?.Instance;
}
}

Answer 2

通常在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;