Question

尝试在Blazor中完全开发网站

我试图弄清楚如何添加例如当前所选元素的活动类。我有一个侧边菜单栏，非常棒的是要知道用户在哪个页面上。

找到了这个JavaScript solution，但我想通过#c

完成

有关如何实施的任何想法？

Answer 1

一如既往地具有约束力定义一个属性并绑定到class =“ style @prop”

Answer 2

使用NavLink标记在Blazor中的页面之间导航。有一个名为NavLinkMatch的属性，只要匹配当前路线，该属性就会自动为您应用“活动”类。

有关更多信息，请选中此-https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.1#navlink-component

希望它会对您有所帮助：）

Answer 3

Microsoft.AspNetCore.Components.Routing.NavLink组件会自动添加“活动”类（或您选择的类）。下面的示例代码。

<ul class="nav flex-column">
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="counter">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="fetchdata">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
        </NavLink>
    </li>
</ul>

来源：https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.routing.navlink?view=aspnetcore-3.1

Answer 4

最好的方法是使用NavMatchLink.All或NavMatchLink.Prefix，它基于URL NavMatchLink设置活动类。All可用于NavLink href URL与链接显示标题匹配的静态或专用页面，如果您在循环内渲染NavLink，然后最好在URL中为ex / ActionMethod / {Parameter}？＆Title = {Link Display Name}添加链接的显示标题，并使用NavMatchLink.Prefix。

Blazor-将活动类添加到当前元素

4 个答案: