动态创建和销毁 Blazor 客户端组件？

Question

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

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

编辑：我添加了这个示例块来阐明我正在尝试的内容。

这是在“WindowContainer.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()
    {
    }
}

这是在 MainLayout.razor 中

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>

• 如何销毁WindowTest1.Components.WindowContainer？

Answer 1

如果您只有几个项目，您应该能够使用 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 = "";
    }

}

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

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

请注意，我添加了一个简单的类 SimpleString，并附加了一个 ToDo 属性。我已更改 foreach 循环以检查属性并相应地构建待办事项和已完成部分。

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

}

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