如何将Blazor组件注入到自行开发的TabControl中

Question

我发现了一个非常简单的视频，我用它来构建一个TabControl。或多或少，这是一个很好的模板。

这个youtube视频可以在这里找到：https://www.youtube.com/watch?v=EMWfM3_v0J4

但是我现在要做的是用它构建一个组件。我想知道如何从外部插入其他组件？

我想在我的Blazor代码中做以下操作：

<TabControlComponent>
  <Component1 Title="..." />
  <Component2 ... />
  <Component3 />
  <Component4 />
  <Component5 />
</TabControlComponent>

个别项目的标题如何显示在按钮上，我很清楚。但我不清楚如何从外部插入组件。

组件的代码如下所示。

<div class="btn-group">

    @foreach (var item in types)
    {
        if (Array.IndexOf(types, item) == selected)
        {
            <button class="btn btn-primary">@item.Name</button>
        }
        else
        {
            <button class="btn btn-secondary" @onclick="() => selected = Array.IndexOf(types, item)">@item.Name</button>
        }
    }

</div>

@GetRenderFragment(types[selected]);

@code {

    RenderFragment GetRenderFragment(Type type)
    {
        RenderFragment rf = builder =>
        {
            builder.OpenComponent(0, type);
            builder.CloseComponent();
        };
        return rf;
    }

    int selected = 0;

    [Parameter]
    public ComponentBase[] Components { get; set; }

    Type[] types => Components.Select(c => c.GetType()).ToArray();

}

Answer 1

TabControlComponent.razor代码中的这一行应该包含组件数组。

[Parameter]
public ComponentBase[] Components { get; set; }

在父组件中，可以定义如下组件的数组

<TabControlComponent Components = @components>
</TabControlComponent>

@code{
ComponentBase[] components = {new component1, new component2, new component3};
}