blazor服务器端的Javascript Interop Dispose问题

Question

当刷新或手动导航到使用javascript interop的Blazor页面时，它会出错，因为javascript中不再存在dispose函数。

有没有办法不跑"；处置"；在刷新或导航时实现IDisposable的组件上？有没有"；ElementReference"；类型会有帮助吗？

以下是一些上下文代码：

我的blazor组件实现IDisposable:

@implements IDisposable

这将运行我的Dispose函数，该函数调用我的互操作文件：

public void Dispose()
{
JqxWindowJsInterop.Dispose();
}

我的JsInterop运行对javascript:的调用

public void Dispose()
{
jsRuntime.InvokeAsync<string>(
"jqxWindowComponent.dispose",
InstanceId);
_JqxWindowJsInteropReference?.Dispose();
}

最终在javascript:中运行

window.jqxWindowComponent = {
dispose: function (instanceId) {
console.log('jqxWindowComponent.dispose : ' + instanceId);
if ($('#' + instanceId).length) {
$('#' + instanceId).jqxWindow('destroy');
}
delete jqxWindowList[instanceId];       
}};

当我通过浏览器刷新或导航到此页面时，我会收到此错误

System.NullReferenceException："对象引用未设置为对象的实例。"MyNameSpace.Components.JqxWindowComponent.JqxWindow JsInterop.get返回null。

感谢您的帮助。

Answer 1

我通过添加渲染检查属性解决了这个问题。

private bool firstRenderComplete;

我把它设置在这里：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
firstRenderComplete = true;
DayPilotJsInterop = new DayPilotJsInterop(JavascriptRunTime, InstanceId);
await DayPilotJsInterop.Initialize();
}
}

最后在这里测试：

public void Dispose()
{
if(firstRenderComplete == true)
{
DayPilotJsInterop.Dispose();
}
}