Blazor 服务器，条件元素 + JS 调用

Question

我有一个 Blazor Server 应用程序，它是一个多步骤“向导”表单。在每个相关步骤之后，都会调整状态，并通过条件语句显示/隐藏新的 HTML（下面的简单示例）。

if (IsStepSignature)
{
    <div>Signature HTML here</div>
}

这一切都很好。当我需要在上面动态生成的 HTML 上调用一些 JS 逻辑时（例如，单击处理程序以连接外部 JS 库），我的问题就出现了。当我处理“下一步”点击时，我可以很好地调用 JS……但它还没有从上面看到动态 HTML。有没有办法调用一些 JS，并对其进行控制，使其直到页面从 C# 代码执行重绘后才执行？

2020 年 5 月 18 日来自 Nik P 的更新 可以利用一些标志并使用OnAfterRenderAsync 来控制此排序。这确实有效，但它确实需要一些额外的往返服务器的跃点。以下是我在实施时看到的。这可能只是 Blazor Server 的特性，因为优点/缺点之一是一些已知的额外的健谈。这些请求总共有 2.5K，非常小。

CLIENT    -->    Browser Dispatch Event (NEXT CLICK)
Render    <--    SERVER
CLIENT    -->    Render Complete
Invoke JS <--    SERVER
CLIENT    -->    Invoke Complete

Answer 1

在重新渲染发生之前，您遇到的问题与客户端 HTML 中根本不存在的元素有关。因此，一种方法是在 C# 代码中设置一个布尔标志，表示在渲染后需要运行代码，并填充 JS 互操作所需的支持字段。每当您需要运行 JS 互操作时，请将您的标志设置为 true，将您的支持字段设置为 JS 互操作调用所需的值，然后执行一些启动 DOM 差异计算的操作。 （即使 StateHasChanged 也应该足够了，但是按照您提到的有条件地添加您的项目也可以）然后，按如下方式覆盖您的 OnAfterRenderAsync 方法：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        // any first render code
    }

    if(yourFlag)
    {
        YourJSInteropMethod(supportField1, supportfield2);
        yourflag = false;  
    }
}

这种方法的简单之处在于 DOM 更新总是发生在 OnAfterRenderAsync 调用之前，因此您的 HTML 将填充您使用 JS 定位的内容。