如何將 Blazor 組件實例保存在變量中並在 my.cshtml 中呈現

Question

考慮到我有一個名為Tab的 class 。

public class Tab
{
    public Guid Id { get; }
    public bool IsVisible { get; set; }

    protected Tab()
    {
        Id = Guid.NewGuid();
    }
}

我想將這些選項卡嚴格耦合到 Blazor 組件實例，並通過遍歷選項卡來呈現這些實例。 我想控制何時創建組件以及何時再次銷毀它。

我想這樣做是因為這樣我可以為每個組件保留 state 。

這是簡單方法的問題。 考慮這樣的事情：

@code {
    public void CreateNewTabAndRemoveOldTab()
    {
        Tabs.RemoveAt(0);
        Tabs.Add(new Tab());
    }
}

foreach (var tab in Tabs)
{
    <MyTabComponent/>
}

新創建的選項卡將簡單地接管已刪除選項卡的 state。 OnInitialized不會被調用。

我查看了RenderFragment ，但它看起來不像它的工作屬性。 問題是 Blazor 框架仍將決定何時創建新組件（因此調用OnInitialized ）或何時使用現有實例。

Answer 1

如果我沒看錯的話，Tab 是 class，而不是組件。 您需要將選項卡列表與呈現它們的組件分離。 您的選項卡列表存在於服務中，scope 取決於您使用它們做什么。 您的選項卡組件在列表中顯示當前選定的選項卡。 如果您展示更多的邏輯，我可能會向您展示一個相關的工作示例。

Answer 2

檢查這個

@ref 它是對您的組件的引用，它已添加到組件列表中。

@implements IDisposable

@foreach (var tab in tabs)
{
    <MyTabComponent @ref=@TabRef Tab=@tab />
}

@code {

    List<Tab> tabs = new List<Tab>();
    List<MyTabComponent> tabsComp = new List<MyTabComponent>();

    MyTabComponent TabRef {
        set { tabsComp.Add(value); }
    }

    public void CreateNewTabAndRemoveOldTab()
    {
        tabs.RemoveAt(0);
        tabs.Add(new Tab());
    }
    
    public void Dispose()
    {
    }
}

Answer 3

MyTabs.razor

       <CascadingValue Value="@this" IsFixed="true">
        foreach (var tab in Tabs)
        {
            <MyTabComponent/>
        }
        </CascadingValue>
    
    @code{
    private List<MyTabComponent> Tabs;
    
    public void Register(MyTabComponent tab)
            {
                this.Tabs.Add(tab);
    }
    
    public void UnRegister(MyTabComponent tab)
            {
                this.Tabs.Remove(tab);
    }
    }

MyTabComponent.razor

@implements IDisposable
<div></div>

@code{
[CascadingParameter]
protected MyTabs Context { get; set; }

protected override void OnInitialized()
        {
            Context?.Register(this);
//  implement your logic here
        }

public void Dispose()
        {
            Context?.UnRegister(this);
//  implement your logic here
        }
}