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

【问题标题】：Blazor - Add Active Class to Current ElementBlazor - 将活动类添加到当前元素
【发布时间】：2021-12-03 11:39:25
【问题描述】：

尝试完全在 Blazor 中开发网站

我正在尝试弄清楚如何添加例如当前选定元素的活动类。我有一个侧面菜单栏，知道用户在哪个页面上会很棒。

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

关于如何实现它的任何想法？

【问题讨论】：

标签： blazor

【解决方案1】：

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

【讨论】：

【解决方案2】：

一如既往的绑定定义一个属性并绑定在 class="style @prop"

【讨论】：

【解决方案3】：

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

希望对你有帮助:)

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

正在寻找不需要 BootStrap 的解决方案，这是第一次匹配。如果其他人正在查看此内容，请记住将 StateHasChanged() 包含在您的 EventHandler 中！

<button type="button" class="btn btn-nav @isActive" @onclick=NavTo>@display</button>

@code {
    [Inject] NavigationManager _navMan { get; set; }
    [Parameter] public string Destination { get; set; }
    [Parameter] public string Display { get; set; }
    string display => String.IsNullOrWhiteSpace(Display) ? Destination : Display;
    string isActive = "";

    protected override void OnInitialized() {
        _navMan.LocationChanged += UpdateLoc;
    }
    async Task NavTo() {
        _navMan.NavigateTo($"/{Destination}");
    }
    void UpdateLoc(object sender, LocationChangedEventArgs args) {
        isActive = args.Location.Replace(_navMan.BaseUri, "") == Destination ? "active" : "";
        StateHasChanged();
    }
}

【讨论】：