3

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

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

（我会补充一点，理想情况下，我希望能够使用一个AlertMessage独立的，AlertMessageGroup如果我不想的话，不必将它包含在其中）

4

2 回答 2

1

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

AlertMessage.razor 的代码片段

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


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

AlertMessageGroup.razor 的代码片段

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

 <CascadingValue Value=this>

    </CascadingValue>

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

    }

希望我清楚...

于 2019-11-04T19:41:41.227 回答
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 组件。我们将劫持它的行为以在每次计数时发出警报。我们还将通过简单地调用在单独的 Razor 输出中捕获总计数@alerts.Count()。对于 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);
    }
}
于 2019-11-29T17:52:04.627 回答