Blazor 服务器应用程序 $(document).ready() 等价物

Question

我有一个 Blazor 服务器应用程序，我需要在加载文档时运行一个 js 函数——当我使用“静态”模式时，jQuery $(document).ready()工作正常，但我需要使用“ServerPrerendered”模式——当我使用“静态”模式时用户单击导航栏上的不同链接， $(document).ready() 永远不会触发，因为 Blazor 正在使用 SingalR 更新内容。 建议的方式做到这一点是使用JSRuntime.InvokeVoidAsync("jsfunctiont")内OnAfterRenderAsync的defaultLayout.razor但问题是这个事件发生之前所有的子组件完全呈现，所以我的js函数将失败。 我的问题是在所有子组件完全渲染后调用js函数的方式是什么？ 这相当于使用“ServerPreRendered”模式的 Blazor 服务器应用程序中的$(document).ready() ？

太感谢了！

Answer 1

OnAfterRender （使用 firstRender == true）正是您所需要的。 直到整个内容在浏览器中呈现后才会触发。

但是，在您的页面创建后，内容将发生变化，因此将创建新组件并销毁现有组件。 如果您的jsfunction需要挂钩到页面上的每个组件，而不管它是何时创建的，那么您的方法将不起作用。 您需要各个组件也覆盖OnAfterRenderAsync并调用jsfunction将引用传递给它们自己。

Answer 2

当通过 SignalR（使用 Blazor 服务器端）添加/删除新组件时， $(document).ready()没有触发同样的挑战。

而不是挂钩到每个组件的OnAfterRenderAsync并调用JsRuntime.Invoke..我通过使用$(document).on('DOMSubtreeModified', function () { // doyourwork });解决了它$(document).on('DOMSubtreeModified', function () { // doyourwork });