在 blazor 中使用 javascript，直到我点击页面才工作

Question

赏金将在 4 天后到期。 此问题的答案有资格获得+50声望赏金。 sinfella想引起人们对这个问题的更多关注。

我遇到了一个问题，因为我正在通过互操作onAfterRenderAsync方法加载我的 javascript，我无法让我的 javascript 加载（在页面加载时）。ZDE9B9ED78D7E2E1DCEEFFEE780E2F91.9Z 仅在点击页面后才有效知道这是为什么，显然是因为我的 javascript 正在等待 onclick function...
但是我想避免这种情况，并且无需自己附加 onclick function 就可以加载 javascript。
任何人都可以帮忙吗？

所以基本上，我有一个带有汉堡扩展器的导航栏（显示或隐藏我的侧边栏），但这只有在我点击屏幕后才有效。
我希望它立即工作...

这是 javascript：

function LoadContent() {
    function LoadContent() {
    document.addEventListener("DOMContentLoaded", document.onclick = function(event) {
      const showNavbar = (toggleId, navId, pId, headerId) => {
        const toggle = document.getElementById(toggleId),
        nav = document.getElementById(navId),
        bodypd = document.getElementById(pId),
        headerpd = document.getElementById(headerId);
        mainbodypd = document.getElementById("mainbody");
                      
        if (toggle && nav && bodypd && headerpd && mainbodypd) {
          
          toggle.addEventListener("click", () => {
            nav.classList.toggle("show");
            toggle.classList.toggle("bx-x");
            bodypd.classList.toggle("body-pd");
            headerpd.classList.toggle("body-pd");
            mainbodypd.classList.toggle("height-100short");
          });
        }
      };
      showNavbar("header-toggle", "nav-bar", "body-pd", "header");
      const linkColor = document.querySelectorAll(".nav_link");
      
      function colorLink() {
        if (linkColor) {
          linkColor.forEach(l => l.classList.remove("active"));
          this.classList.add("active");
        }
      }
      linkColor.forEach(l => l.addEventListener("click", colorLink));
    });     
  }
}

和 Blazor：

protected override async Task OnAfterRenderAsync(bool firstRender){
  if (firstRender){
    await JS.InvokeVoidAsync("LoadContent");
    await JS.InvokeVoidAsync("ToolTipInit");
    StateHasChanged();
  }
}

Answer 1

你可以试试这个方法。 在根文件夹或 wwwwroot 文件夹中的任何位置创建 JavaScript 文件，例如“MyCode.js”。 在那里复制您的 JavaScript function 但在开头添加导出。 它应该是这样的：

export function LoadContent() {

从您的代码中完全删除您的document.addEventListener("DOMContentLoaded, document.onclick部分并保存文件。

将 IJSRuntime 注入到您的 Blazor 组件中，如下所示：

@inject IJSRuntime JSRuntime

在 Blazor 组件的代码部分添加以下代码：

    protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await using var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./MyCode.js");
    await module.InvokeVoidAsync("LoadContent");
}