blazor 服务器端的 Javascript 互操作处理问题答案

【问题标题】：Javascript Interop Dispose Problem with blazor serversideblazor 服务器端的 Javascript 互操作处理问题
【发布时间】：2021-02-12 04:45:25
【问题描述】：

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

有没有办法在刷新或导航时不在实现 IDisposable 的组件上运行“dispose”？ “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.JqxWindowJsInterop.get 返回 null。

任何帮助表示赞赏。

【问题讨论】：

instanceId 是什么？你看是否在日志文件中？你检查过日志文件吗？
我为我的 JavaScript 组件分配了一个生成的 guid，作为 InstanceId 传递
您是否删除了 instanceId？在运行 JavaScript 之前删除实例可能会导致异常。
dispose 删除实例。它在使用 Blazor 站点导航时正常运行，只是在使用浏览器 URL 手动导航时崩溃
你可能有时间问题，幸运的是它在运行时没有崩溃。 id 可能会被过早删除，并且只有在您慢慢完成时才会看到问题。

标签： c# blazor dispose blazor-server-side javascript-interop

【解决方案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();
    }

}

【讨论】：