Hello. I have problem with reinitialization of TabItem content. When i open 2 tabs and close first tab, component in my second tab start initialize again (OnInitializedAsync is started). I've simplified the logic of my application in the example below. Is it possible to avoid this problem?
TestTabs.razor
<RadzenStack>
<RadzenButton Click="@(() => AddItem(1))">Add item1</RadzenButton>
<RadzenButton Click="@(() => AddItem(2))">Add item2</RadzenButton>
</RadzenStack>
<RadzenTabs @ref="tabs" RenderMode="TabRenderMode.Client" @bind-SelectedIndex=@selectedIndex>
<Tabs>
@foreach (var item in items)
{
<RadzenTabsItem >
<Template>
<RadzenStack AlignItems="AlignItems.Center" Gap="10px"
Orientation="Orientation.Horizontal">
<RadzenText Text="@item.Name" />
<RadzenButton Icon="close" Click="RemoveItem"></RadzenButton>
</RadzenStack>
</Template>
<ChildContent>
<CascadingValue Value="@item.InnerValue">
@item.View
</CascadingValue>
</ChildContent>
</RadzenTabsItem>
}
</Tabs>
</RadzenTabs>
@code {
RadzenTabs tabs;
int selectedIndex = 0;
List<TabItem> items = new List<TabItem>();
void AddItem(int itemNumber)
{
Guid guid = Guid.NewGuid();
items.Add(new TabItem
{
Name = "Item" + itemNumber,
View = CreateView(guid) as RenderFragment,
InnerValue = $"Item{itemNumber} inner value"
});
}
void RemoveItem()
{
items.RemoveAt(selectedIndex);
if (selectedIndex >= items.Count) selectedIndex = items.Count - 1;
tabs.Reload();
}
private static object CreateView(Guid ID)
{
RenderFragment renderFragment1 = builder =>
{
builder.OpenComponent<TabItemComponent>(0);
builder.SetKey(ID);
builder.CloseComponent();
};
return renderFragment1;
}
public class TabItem
{
public string Name { get; set; }
public RenderFragment View { get; set; }
public string InnerValue { get; set; }
}
}
TabItemComponent.razor
<h3>@Value</h3>
@code {
public string Value = "";
[CascadingParameter] public string InnerValue { get; set; }
protected override async Task OnInitializedAsync()
{
await Task.Delay(5000);
Value = InnerValue;
}
}