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

}

当然，您可以用任何blazor组件替换“ div”，并且其工作原理完全相同。渲染树的构建可有效处理更改列表后重新渲染等场景。

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

请注意，我添加了一个简单的类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中，将IDisposable组件从UI中删除时会触发其处置。在我的示例中，没有必要使用IDisposable，但是在通过按钮单击完成removeItem方法之后，将调用dispose方法。

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

1 个答案: