如何向Blazor对话框组件传递可变数量的不同子组件？

你需要的嵌套DialogItem的用法完全可以实现，MudBlazor等组件库的同类组件均基于级联参数+子组件注册的方案实现。你之前的泛型模板方案不适用，是因为该方案强制所有列表条目共用同一套渲染逻辑，天然不支持每个条目独立自定义内容。具体实现步骤如下：

步骤1：实现DialogItem容器组件 #

该组件仅作为内容容器，负责捕获自身嵌套的内容，并在初始化时将自身注册到父Dialog组件中：

@implements IAsyncDisposable

@code {
    // 接收级联传递的父Dialog实例
    [CascadingParameter]
    private Dialog ParentDialog { get; set; }

    // 捕获DialogItem标签内的所有自定义内容
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        ParentDialog?.RegisterDialogItem(this);
    }

    // 组件销毁时反注册，避免内存泄漏
    public ValueTask DisposeAsync()
    {
        if (ParentDialog != null && ParentDialog.DialogItems.Contains(this))
        {
            ParentDialog.DialogItems.Remove(this);
        }
        return ValueTask.CompletedTask;
    }
}

步骤2：实现Dialog父组件 #

负责收集所有子DialogItem，提供步骤切换逻辑，按当前激活索引渲染对应DialogItem的内容：

<!-- 级联传递当前Dialog实例，供子DialogItem注册使用 -->
<CascadingValue Value="this" IsFixed="true">
    <!-- Dialog外壳代码可自行补充，比如蒙层、标题栏、关闭按钮等 -->
    <div class="dialog-content">
        <!-- 仅渲染当前激活的步骤内容 -->
        @if (ActiveIndex >= 0 && ActiveIndex < DialogItems.Count)
        {
            @DialogItems[ActiveIndex].ChildContent
        }
    </div>
    <!-- 可选：内置操作按钮，也可暴露参数让外部自定义 -->
    <div class="dialog-actions">
        <button @onclick="PrevStep" disabled="@ActiveIndex == 0">上一步</button>
        <button @onclick="NextStep" disabled="@ActiveIndex == DialogItems.Count -1">下一步</button>
    </div>
</CascadingValue>

@code {
    // 存储所有注册的子DialogItem
    internal List<DialogItem> DialogItems { get; set; } = new();

    // 对外暴露的当前激活步骤索引，支持双向绑定
    [Parameter]
    public int ActiveIndex { get; set; } = 0;

    [Parameter]
    public EventCallback<int> ActiveIndexChanged { get; set; }

    // 供子DialogItem调用的注册方法
    internal void RegisterDialogItem(DialogItem item)
    {
        if (!DialogItems.Contains(item))
        {
            DialogItems.Add(item);
        }
    }

    // 步骤切换逻辑
    public async Task PrevStep()
    {
        if (ActiveIndex > 0)
        {
            ActiveIndex--;
            await ActiveIndexChanged.InvokeAsync(ActiveIndex);
            StateHasChanged();
        }
    }

    public async Task NextStep()
    {
        if (ActiveIndex < DialogItems.Count - 1)
        {
            ActiveIndex++;
            await ActiveIndexChanged.InvokeAsync(ActiveIndex);
            StateHasChanged();
        }
    }
}

步骤3：实际使用示例 #

和你期望的用法完全一致：

<Dialog @bind-ActiveIndex="currentStep">
    <DialogItem>
        <h3>第一步：填写基础信息</h3>
        <InputText @bind-Value="userName" Placeholder="请输入用户名" />
    </DialogItem>
    <DialogItem>
        <h3>第二步：绑定账号</h3>
        <InputNumber @bind-Value="phone" Placeholder="请输入手机号" />
    </DialogItem>
    <DialogItem>
        <h3>提交完成</h3>
        <p>信息提交成功，等待审核</p>
    </DialogItem>
</Dialog>

@code {
    private int currentStep = 0;
    private string userName;
    private long phone;
}

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