Question

页面加载完成后，我正在尝试运行一个简单的javascript函数。从本质上讲，代码所做的是获取当前的基本路径名，并找到具有相同ID的navlink并在其上粘贴一个类。 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的新手，所以我不确定是什么导致了此问题。

Answer 1

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

您的问题

Blazor内部跟踪UI（就像影子dom，但实际上不是一个），并且它无法跟踪您在JS中所做的更改。

当渲染Nav时，它不知道您添加了那个CSS类，因此它被Blazor知道的CSS类列表取代。

NavLink

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

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

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

1 个答案: