时间戳

首页 > 解决方案 > 如何从 Blazor Server 中的页面处置（销毁）组件？

c# - 如何从 Blazor Server 中的页面处置（销毁）组件？

问题描述

我想知道如何在用户关闭模态窗口组件后正确处置（销毁）它。现在的样子，从 DOM 中移除，但实例留在服务器中（重新打开窗口时分配给 form-control 的时间值保持不变）并且组件中的 Dispose() 没有被调用.

@page "/"

<button class="btn btn-primary" @onclick="@(e => modalWindow.Show())">Open Dialog</button>

<ModalWindowToDispose @ref="modalWindow" ></ModalWindowToDispose>

@code {

    ModalWindowToDispose modalWindow;

    void OpenDialog()
    {
        modalWindow.Show();
    }
}

// ModalWindowToDispose Component ( Show here in the same page only for simplicity)
@implements IDisposable
    
@if (ShowPopup)
{
    <div class="modal" tabindex="-1" style="display:block;margin-top:100px" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <input class="form-control" type="text" value="@temp" placeholder="" />
                <button class="btn btn-primary" @onclick="@(e => ShowPopup = false)">Close</button>
            </div>
        </div>
    </div>
}
    
@code {
    bool ShowPopup = false;
    string temp = DateTime.Now.ToLongTimeString();
    
    public void Show()
    {
        ShowPopup = true;
        StateHasChanged();
    }
    
    void IDisposable.Dispose()
    {
        string tttt = "";
    }
}

标签： c#blazor-server-side

解决方案

在您的代码中，<ModalWindowToDispose />实例始终是 DOM 的一部分。 <div class="modal"... ></div>由于您if上面的陈述，您只添加或删除了 , 的一部分。

要解决此问题，您可以使用容器方法，如它所做的库Blazored.Modal，它们将“模态问题”分为两个类。modal 是容器，ModelInstance是在modal 关闭时应该释放的组件。如果模态实例被关闭，它会从容器中移除并因此被丢弃，因为它不再是 DOM 的一部分。

推荐阅读