将附加数据传递到Blazor组件中的Generic RenderFragment

Question

我有一个简单的Blazor组件，它在泛型列表上迭代：

@typeparam TItem;
@foreach (var item in List)
{
@ElementTemplate(item); // What code should be here to pass i to the ElementTemplate????
i++;
}
@code {
int i = 0;

[Parameter] public List<TItem> List { get; set; }
[Parameter] public RenderFragment<TItem> ElementTemplate { get; set; }
}

我有另一个简单的组件，它将获得一个项目和一个索引来呈现数据(Employee(：

<div> @Index . @Person.Name </div>
@code{
[Parameter] public Person { get; set; }
[Parameter] public int Index { get; set; }
}

在我的主页上，我有以下内容：

<GenericList List="employees">
<ElementTemplate>
<Employee Person="context" Index="?"></Employee>
</ElementTemplate>
</GenericList>

正如您所看到的，Employee组件需要一个Index参数，我如何从GenericList组件传递Index？在本例中，变量"i"应传递给ElementTemplate以及Generic TItem对象本身。

Answer 1

我发现快速/简单的方法是使用元组作为RenderFragment上下文：

@foreach (var item in List)
{
@ElementTemplate((item,i));
i++;
}
@code {
int i=0;
[Parameter] public List<TItem> List { get; set; }
[Parameter] public RenderFragment<(TItem item, int index)> ElementTemplate { get; set; }
}

然后你的标记变成：

<GenericList List="employees">
<ElementTemplate>
<Employee @key=@context.index Person=@context.item Index=@context.index></Employee>
</ElementTemplate>
</GenericList>

如果您愿意，可以在GenericList中使用实用程序类，而不是元组。

Answer 2

您可以为上下文定义一个复杂的类

在GenericList.razon中，定义一个类：

public class ListContext
{
public TItem Item {get; set;}
public int Index {get; set;}
}

并将此类用作模板的上下文类型：

[Parameter] 
public RenderFragment<ListContext> ElementTemplate { get; set; }

然后当你调用这个模板时，你可以创建一个新的类并设置正确的参数：

@foreach (var item in List)
{
@ElementTemplate(new ListContext{Item = item, Index = i});
i++;
}

以下是一个工作示例：https://blazorrepl.com/repl/cuvakzPF21sXSZGK54