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; }
  }

我还有另一个简单的组件，它将获得一个项目和一个索引以呈现数据（员工）：

<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”以及通用TItem对象本身都应传递给ElementTemplate。

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

将其他数据传递给Blazor组件中的Generic RenderFragment

2 个答案: