如何从 Blazor 服务器中的页面处理（销毁）组件？

Question

我想知道如何在用户关闭模态 window 组件后正确处置（销毁）它。 现在的方式，它从DOM中删除，但实例留在服务器中（重新打开window时分配给表单控件的时间值保持不变）并且组件中的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 = "";
    }
}

Answer 1

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

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