如何将Blazor组件注入自研TabControl

Question

我发现了一个非常简单的视频，我用它设法在 Blazor 中构建了一个 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};
}

如何将Blazor组件注入自研TabControl

How to inject Blazor Components into self developed TabControl

blazor-server-side