Blazor：用列表项包装 NavLink

Question

当我在 Blazor 服务器应用程序中使用 NavLink 时，它会呈现为 <a>。我想得到一个包装它的列表项，例如 <li><a>.

我还想尽可能多地利用 NavLink 的默认行为（例如跟踪活动 url）。

我尝试了一些简单的方法，比如

public class ListItemNavLink : NavLink
{
    public string? ListItemCssClass { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "li");
        builder.AddAttribute(1, "class", ListItemCssClass);

        builder.OpenElement(2, "a");

        builder.AddMultipleAttributes(3, AdditionalAttributes);
        builder.AddAttribute(4, "class", CssClass);
        builder.AddContent(5, ChildContent);

        builder.CloseElement();
        builder.CloseElement();
    }
}

但是当我尝试这个时

<ListItemNavLink ListItemCssClass="sidebar-item" class="sidebar-link" href="x">

我明白了。

<li><a listitemcssclass="sidebar-item" href="x" class="sidebar-link">

这不是我想要的。我想要这样的东西（请注意应用的 ACTIVE class 状态）：

<li class="sitebar-item active">
<a class="sidebar-link">Some Text</a>
</li>

有什么提示吗？谢谢

Answer 1

如果我理解了您的期望，请尝试以下操作作为您的 ListItemNavLink - ListItemNavLink.razor.cs.

<li class="@this.ListItemCssClass">
    <NavLink @attributes="@this.AdditionalAttributes" Match="@this.Match" ActiveClass="@this.ActiveClass" ></NavLink>
</li>

@code {
    [Parameter] public string ListItemCssClass { get; set; }

    [Parameter] public NavLinkMatch Match { get; set; }

    [Parameter] public string ActiveClass { get; set; }

    [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; }

}

我已将您与 NavLink 一起使用的常规 [Parameters] 添加到您的组件中，以便您可以传递它们。

如果您想查看 RenderTreeBuilder 的构造方式，请在 obj/debug/net5.0 中找到 nnn.g.cs 文件/剃刀

Blazor：用列表项包装 NavLink

Blazor: Wrap NavLink with List Item

blazor

blazor-server-side

blazor-component