Asp.net core 动态创建和销毁Blazzor客户端组件？

我正在尝试动态创建和销毁Blazor组件，我在页面内的按钮上单击鼠标创建了该组件，但无论如何，我找不到有关该主题的任何信息或示例

• 如何动态创建和销毁Blazor组件

编辑：我添加了这个示例块以澄清我正在尝试的内容

这是在“WindowContainer.razor”内的

@使用系统
@实现IDisposable
@使用System.Net.Http
@注入HttpClient Http
@标题
@儿童内容
@代码
{
公共空间处置（）
{
}
}

这是在MainLayout.razor内部

@using System
@implements IDisposable

@using System.Net.Http
@inject HttpClient Http

<div draggable="false" id="UIWindowContainer" class="ui-window-content">
    <div draggable="true" >
        @Caption
        <!-- Minimize -->


    </div>

    @ChildContent
</div>


@code
{
    public void Dispose()
    {
    }
}

div class="main">
    <div class="top-row px-4">
        <button @onclick="onClose">Exit</button>

        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        <WindowTest1.Components.WindowContainer @ref="sssss">test</WindowTest1.Components.WindowContainer>
    </div>
</div>

div class=“main”>
出口
测试

• 如何销毁WindowTest1.Components.WindowContainer

---

如果只有几个项目，则应该能够使用If/else流通知渲染树显示或删除组件。如果您有一个项目列表，只需从列表中删除该项目，并让组件重新渲染自身。下面是一个动态添加/删除div的待办事项列表示例

<input @bind-value="newItem"/><button @onclick="addItem" >Add Item</button>
@foreach(var item in ToDoList)
{
    <div>@item <button @onclick="(()=>removeItem(item))">Remove</button></div>
}



@code {
    string newItem = "";
    List<string> ToDoList = new List<string>() { "Get Eggs", "Get Milk", "Get Coffee", "Get More Coffee" };
    private void removeItem(string item)
    {
        ToDoList.Remove(item);
    }
    private void addItem()
    {
        ToDoList.Add(newItem);
        newItem = "";
    }

}

添加项目
@foreach（ToDoList中的变量项）
{
@项目移除
}
@代码{
字符串newItem=“”；
List ToDoList=new List（）{“获取鸡蛋”、“获取牛奶”、“获取咖啡”、“获取更多咖啡”}；
私有void removietem（字符串项）
{
ToDoList。删除（项目）；
}
私有void addItem（）
{
ToDoList.Add（newItem）；
newItem=“”；
}
}

当然，您可以用任何blazor组件替换“div”，它的工作原理完全相同。rendertree用于高效处理列表更改后重新渲染等场景

在现实世界中，使用属性跟踪更改可能比简单地从列表中添加和删除项目更现实。通过这种方式，我们可以打包更改列表，并将它们发送到某个服务器，该服务器将根据需要发出（添加、更新、删除）命令。请参见下面我的快速肮脏演示：

注意，我添加了一个简单的类SimpleString，并附加了ToDo属性。我已经更改了foreach循环来检查属性，并相应地构建了to Do和Completed部分

<input @bind-value="newItem"/><button @onclick="addItem" >Add Item</button>

<h3>To-Do</h3>
@foreach(var item in ToDoList.Where(x=>x.ToDo))
{
    <div>@item.Value <button @onclick="(()=>removeItem(item))">Remove</button></div>
}

<h2>Completed</h2>
@foreach(var item in ToDoList.Where(x=>!x.ToDo))
{
    <p>@item.Value</p>
}


@code {
    class SimpleString
    {
        public string Value { get; set; }
        public bool ToDo { get; set; }
    }
    string newItem = "";
    bool showComponent = true;
    List<SimpleString> ToDoList = new List<SimpleString>() { new SimpleString { Value = "Get Eggs", ToDo = true }, new SimpleString { Value = "Get Milk", ToDo = true }, new SimpleString { Value = "Get Coffee", ToDo = true }, new SimpleString { Value = "Get More Coffee", ToDo = true } };
    private void removeItem(SimpleString item)
    {
        item.ToDo = false;
    }
    private void addItem()
    {
        ToDoList.Add(new SimpleString { Value = newItem, ToDo = true });
        newItem = "";
    }

}

添加项目
做
@foreach（ToDoList.Where（x=>x.ToDo）中的变量项）
{
@项。删除值
}
完整的
@foreach（ToDoList.Where（x=>！x.ToDo）中的变量项）
{
@项目.价值

}
@代码{
类简单限制
{
公共字符串值{get；set；}
公共bool ToDo{get；set；}
}
字符串newItem=“”；
bool showComponent=true；
List-ToDoList=new-List（）{new-SimpleString{Value=“Get-egs”，ToDo=true}，new-SimpleString{Value=“Get-Milk”，ToDo=true}，new-SimpleString{Value=“Get-Coffee”，ToDo=true}，new-SimpleString{Value=“Get-More-Coffee”，ToDo=true}；
私有无效删除项（简单限制项）
{
item.ToDo=false；
}
私有void addItem（）
{
Add（newsimplestring{Value=newItem，ToDo=true}）；
newItem=“”；
}
}

---

还值得注意的是，Blazor组件可以实现IDisposable接口，以防您需要利用组件的“处置”来释放非托管资源。在Blazor中，IDisposable组件在从UI中删除该组件时激发其dispose。在我的示例中，没有必要使用IDisposable，但dispose方法将在removeItem方法通过单击按钮完成后调用

但是。。没有添加或删除的方法。你是如何访问它们的？！