在 Blazor Webassembly 中准备好 DOM 之前运行主题脚本答案

【问题标题】：Theme scripts run before DOM is ready in Blazor Webassembly在 Blazor Webassembly 中准备好 DOM 之前运行主题脚本
【发布时间】：2020-12-18 18:00:55
【问题描述】：

我有以下代码

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

我可以调试并看到 Layout1.init(); 时 DOM 还没有准备好；调用哪些结果按钮事件侦听器不被应用，例如 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>)

【问题讨论】：

我认为应该是InvokeVoidAsync("Layout1.init"); -没有括号- InvokeVoidAsync sintax是InvokeVoidAsync("your-function",arg1,arg2,arg3...)

标签： c# asp.net-core .net-core blazor blazor-webassembly

【解决方案1】：

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

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

【讨论】：

样式切换？
改写。这样更好吗？

【解决方案2】：

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

【讨论】：

我试过了，但出现错误。在我的初始帖子中检查更新 #1