Blazor 父组件能否知道其中有多少子组件？

Question

我正在创建 2 个 blazor 组件：AlertMessage 和 AlertMessageGroup。 AlertMessageGroup 旨在在其中包含多个 AlertMessage 组件。我希望AlertMessageGroup 具有基于AlertMessages 的数量和类型的显示逻辑（AlertMessageType 是一个AlertMessage 参数，并且可能会引用一个枚举值）。

父组件（例如AlertMessageGroup）是否有可能知道它包含多少子组件（例如AlertMessage），并有基于此的显示逻辑？

（我会补充说理想情况下我希望能够单独使用单个AlertMessage，如果我不这样做，则不必将其包含在AlertMessageGroup 中想要）

Answer 1

这是最简单的解决方案：

第一步，创建一个警告框组件：

这是一个警报，如果您愿意，可以根据 OP 单独使用。

<div class="alert alert-primary" role="alert">
    @ChildContent
</div>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
}

第二步，创建一个AlertGroup组件：

这是一个可以处理 IEnumerable 的 T 警报的组件。 我们将使用 TItem 来指定 AlertGroup 是通用的。它可以处理我们扔给它的任何物体。接下来，我们遍历IReadOnlyList<TItem> Items 并在AlertMessage 中渲染每个用户定义的模板。

@typeparam TItem

@foreach (var item in Items)
{
    <AlertMessage>
        @AlertTemplate(item)
    </AlertMessage>
}

@code {
    [Parameter]
    public RenderFragment<TItem> AlertTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

第三步，投入使用：

这是强制性的 Counter 组件。我们将劫持它的行为以在每次计数时发出警报。我们还将通过简单地调用@alerts.Count() 在单独的 Razor 输出中捕获总计数。对于 OP，我们不需要在内部跟踪计数，因为我们从父级提供 TItem。

由于我在示例中使用了int 类型，因此我将内置Context 参数定义为Value。如果这是一个对象，则可能会推断出类型，我们可以使用点表示法，例如：context.Prop。

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<AlertMessageGroup Items="alerts" Context="Value">
    <AlertTemplate>
        <span>My value is @Value</span>
    </AlertTemplate>
</AlertMessageGroup>

<p>@alerts.Count()</p>

@code {

    List<int> alerts = new List<int>();

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        alerts.Add(currentCount);
    }
}

Answer 2

您可以在 AlertMessageGroup 组件中定义 AlertMessage 组件的集合，将捕获的组件引用 (this) 传递给应该在其 OnInitialized 生命周期事件中将自身添加到 AlertMessageGroup 的 AlertMessage。

AlertMessage.razor 的代码 sn-p

[CascadingParameter]
public AlertMessageGroup ContainerParent { get; set; }


protected override void OnInitialized()
{
    ContainerParent.AddChild(this);
}

AlertMessageGroup.razor 的代码 sn-p

// 将组件引用传递给子组件

 <CascadingValue Value=this>

    </CascadingValue>

    @code {
    // Code to add add the children to the parent...

    }

希望我很清楚......