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 });