在 Blazor 服务器 _Host.cshtml 中运行 Javascript答案

【问题标题】：Running Javascript in Blazor Server _Host.cshtml在 Blazor 服务器 _Host.cshtml 中运行 Javascript
【发布时间】：2020-08-20 16:43:20
【问题描述】：

我正在尝试在页面加载完成后运行一个简单的 javascript 函数。本质上，代码所做的是获取当前的基本路径名并找到具有相同 id 的导航链接并在其上粘贴一个类。 Blazor 的<NavLink/> 对我来说不够可定制，我宁愿这样做。该代码有效，但它只出现了几分之一秒，然后在控制台中出现以下内容的同时消失：

[2020-08-20T07:43:50.935Z] 信息：WebSocket 连接到 wss://localhost:44346/_blazor?id=IhkBuLdowknNbyGtvWjcVA。

这是我的 _Host.cshtml 页面：

<!DOCTYPE html>
<html lang="en">
<head>
       <!--stuff-->
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
        <script>  <!--this is the bit I added-->
            var x = $(location).attr('pathname');
            x.indexOf(1);
            x = x.split("/")[1];
            $('#' + x).addClass('onpage');           
        </script>
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>
    <script src="_framework/blazor.server.js"></script>    
</body>
</html>

我对 Blazor 比较陌生，所以我不确定是什么导致了这个问题。

【问题讨论】：

标签： javascript blazor blazor-server-side

【解决方案1】：

这是一个由两部分组成的答案 - 首先是回答您的问题，其次是向您展示我希望的更好方法。

您的问题

Blazor 在内部跟踪 UI - 就像一个 shadow dom，但实际上不是一个 - 它无法跟踪您在 JS 中所做的更改。

当它渲染 Nav 时，它不知道你添加了那个 css 类，所以它被 Blazor 知道的 css classList 替换。

导航链接

NavLink 组件有一个属性调用 ActiveClass - 您可以设置它，当页面处于活动状态时它将使用您自己的类名

<NavLink class="nav-link" href="counter" ActiveClass="onpage">

【讨论】：

感谢您的回答！澄清一下，没有办法用javascript改变ui元素吗？有什么方法可以让 Blazor 知道你已经改变了一些东西吗？因为对于某些图标包，您必须运行一些 javascript，例如 feather.replace() 才能实际加载图标
这是一个值得单独讨论的另一个问题，但简短的回答是 - 您可以但非常小心 - 您不应该做的是更改 Blazor 已标记并将覆盖的内容。快速示例是 - 如果您呈现静态的东西，例如 Blazor 没有理由更新的图标，因为标记永远不会更改，那么您很可能能够在创建后对其进行修改。