DOM 之前的主题脚本运行在 Blazor Webassembly 中准备就绪

Question

我有以下代码

<body>
    <app>Loading...</app>

    <script src="assets/js/vendors.bundle.min.js"></script>
    <script src="assets/js/main.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
    <script src="assets/js/pages/doc.script.min.js"></script>

    <script src="_framework/blazor.webassembly.js" autostart="false"></script>        
</body>

在main.bundle.js里面我有

jQuery(document).ready(function () {
    Layout1.init();
    Blazor.start();
});

我可以调试，看到 DOM 在 Layout1.init() 时没有准备好；调用哪些结果按钮事件侦听器不被应用，例如 var $sidebarCompactToggle = $(".sidebar-compact-switch");

有谁知道 DOM 准备好后如何实现运行脚本？

更新#1

@inject IJSRuntime JSRuntime

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("Layout1.init()");
        }
    }
}

我收到以下错误：

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'init()' in 'window.Layout1'.
      Error: Could not find 'init()' in 'window.Layout1'.
          at https://localhost:44357/_framework/blazor.webassembly.js:1:9198
          at Array.forEach (<anonymous>)

Answer 1

文档就绪总是会在您的 ui 更新之前发生，例如，当您导航到一个新页面时您实际上并没有导航，blazor 只会更新当前页面上的元素并更新 url.

您必须在 c# 中更改 HTML 元素的 class 属性的值。

Answer 2

您可以使用 JSInterop 运行脚本...只需定义一个 JS 函数来包含初始化 JS 对象的代码，并从 OnAfterRender(Async) 对方法中调用一次。这些方法可以包含应在呈现组件后执行的代码。他们还得到一个布尔参数，表示该方法的当前执行是否是第一次执行。

DOM 之前的主题脚本运行在 Blazor Webassembly 中准备就绪

Theme scripts run before DOM is ready in Blazor Webassembly

c#

.net-core

asp.net-core

blazor

blazor-webassembly

DOM 之前的主题脚本 运行 在 Blazor Webassembly 中准备就绪

Theme scripts run before DOM is ready in Blazor Webassembly

c#

.net-core

asp.net-core

blazor

blazor-webassembly

DOM 之前的主题脚本运行在 Blazor Webassembly 中准备就绪