如何在 Blazor 中设置“导航项处于活动状态”？答案

【问题标题】：How do i set "nav-item active" in Blazor?如何在 Blazor 中设置“导航项处于活动状态”？
【发布时间】：2020-10-11 16:19:28
【问题描述】：

我正在使用 Blazor 和 Bootstrap 构建应用程序。我想使用标准的引导导航栏。我不知道如何将“活动”类添加到选中的<li> 标记中。

这是我的代码：

<div class="collapse navbar-collapse">
    <ul class="navbar-nav">
        <li class="nav-item">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link" href="/counter" Match="NavLinkMatch.All">Counter</NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link" href="/fetchdata" Match="NavLinkMatch.All">Fetch data</NavLink>
        </li>
    </ul>
</div>

内置的 <NavLink> 是一个 blazor 组件，会自动更改 <a/> 的类。但由于我使用的是引导导航栏，我需要将“活动”添加到所选 <li> 的类中。

这是链接处于活动状态时的样子：

 <li class="nav-item active">
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
 </li>

【问题讨论】：

标签： c# blazor

【解决方案1】：

您可以使用导航管理器：

<li class="nav-item @GetActive("", NavLinkMatch.All)">
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
</li>

@code {

    [Inject]
    NavigationManager NavigationManager { get; set; }

    protected override void OnInitialized() => NavigationManager.LocationChanged += (s, e) => StateHasChanged();

    bool IsActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix)
    {
        var relativePath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri).ToLower();
        return navLinkMatch == NavLinkMatch.All ? relativePath == href.ToLower() : relativePath.StartsWith(href.ToLower());
    }

    string GetActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) => IsActive(href, navLinkMatch) ? "active" : "";
}

【讨论】：

【解决方案2】：

您应该能够使用自定义模板来实现此目的：

<NavLink href="/myhref">
    <Template>
        <li class="@(context.isActive ? "active" : string.Empty)">
             <a href="@context.href">@context.content</a>
        </li>
    </Template>
    My link description
</NavLink>

Source

【讨论】：

感谢您的回答。我阅读了链接上的所有内容，但似乎 NavLink 组件不支持模板。根据提供的链接： NavLink 组件有一个模板参数： [Parameter] private RenderFragment Template { get;放; } = 获取默认模板（）；但是，我反编译了 NavLink 组件，它不包含这个。
我可以看到NavLink 没有Template 属性，但它确实有ChildContent 类型为RenderFragment 的属性。我自己无法测试它，但也许它会做同样的事情，因为 Github 问题说Template 属性也是RenderFragment 类型？
我自己尝试了一点，但无法让它与ChildContent 一起工作，所以这不是要走的路，而且我没有看到任何其他似乎有用的属性。所以要么创建你自己的NavLink，要么按照@BrianParker 在他的回答中建议的那样去做。
现在看来我会选择 BrianParker 的解决方案。如果我想出任何其他方法，我会在这里发布。看起来 NavLink 组件还使用 NavigationManager 将 URL 与导航链接的 href 进行比较。使用 NavigationManager 可能是最佳实践解决方案。

【解决方案3】：

您可以使用 Bootstrap NavBar 和 Blazor 的 NavLink，而无需添加任何其他代码。需要注意的是，根据 Bootstrap 的文档，您的“活动”类将添加到 <a> 标记中，而不是 <li> 标记中。

来自 Bootstrap 5.x 文档（导航栏的初始示例）：

<li class="nav-item">
  <a class="nav-link active" aria-current="page" href="#">Home</a>
</li>

考虑到这一点，Blazor NavLink 组件替换了 <a> 标记：

<li class="nav-item">
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
        <span class="oi oi-home" aria-hidden="true"></span> Home
        <hr />
    </NavLink>
</li>
<li class="nav-item">
    <NavLink class="nav-link" href="/Reporting" Match="NavLinkMatch.All">
        Reporting
        <hr />
    </NavLink>
</li>

最后，一旦完成，您可以添加自己的 CSS 来进一步修改外观：

.nav-link > hr {
    visibility: hidden;
    color: white;
    height: 2px;
    margin-top: 4px;
    margin-bottom: 0;
}

.nav-item .nav-link.active > hr {
    visibility: visible;
    filter: blur(1.5px);
}

不需要其他代码。

在我的示例中，活动菜单项下会出现一条模糊线，如下所示（注意，需要额外的 HTML/CSS 才能实现完整的视觉效果）：

【讨论】：