在每个循环组件内部添加一个bool型属性IsSelected来标记是否被选中。
在循环组件上绑定一个点击事件,当点击时将该组件的IsSelected变为true,并调用父组件Blazor的方法来通知父组件有一个组件被选中。
在Blazor组件中,定义一个SelectedComponent属性来存储当前被选中的组件。
当有组件被选中时,遍历所有组件,将非选中状态的组件的IsSelected属性设为false。
代码示例:
在循环组件中:
@code {
[Parameter]
public EventCallback OnSelect { get; set; }
public bool IsSelected { get; set; }
private async Task HandleSelect()
{
IsSelected = true;
await OnSelect.InvokeAsync(this);
}
}
在Blazor组件中:
@foreach(var component in Components)
{
OnComponentSelect(component)" />
}
@code {
private Component SelectedComponent { get; set; }
private void OnComponentSelect(Component component)
{
SelectedComponent = component;
foreach(var c in Components)
{
c.IsSelected = (c == SelectedComponent);
}
}
}