Blazor + Ant Design + .NET 5快速开发框架（5）AntDesignAdmin面包屑的自动化

目录

 

运行效果图

制作

面包屑信息处理

面包屑生成

代码地址

---

运行效果图

面包屑的作用很简单，也是很实用的功能

• 当系统拥有超过两级以上的层级结构时；
• 当需要告知用户『你在哪里』时；
• 当需要向上导航的功能时。

 

 

制作

面包屑的代码很简单，只需下面代码即可，但是我们要做的是可以自动化，下面是写死的，每个页面写一次也太麻烦了，虽然功能简单，但是涉及知识很多。

	<Breadcrumb>
        <BreadcrumbItem>
                Home
        </BreadcrumbItem>
        <BreadcrumbItem>
            <a>Application List</a>
        </BreadcrumbItem>
        <BreadcrumbItem>
            An Application
        </BreadcrumbItem>
</Breadcrumb>

制作流程，我们先点击MenuItem，想办法获取SubMenu信息和Menu即可知道自己当前所在位置，这里使用OnMenuItemClicked函数，官方api文档没有给出，但是这个是触发MenuItem点击，然后会获取到MenuItem信息，这里收到信息怎么处理呢，我们肯定要告诉外界，我们获取到了什么信息，这个就需要涉及到绑定了，将组件信息发送给外界，绑定也很简单，只需要两个字段，BreadcrumbItemNav和BreadcrumbItemNavChanged，需要EventCallback来进行回调，这样注册了BreadcrumbItemNav的组件就可以收到回调信息，来进行更改。

using AntDesign;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Caviar.Shared
{
    partial class NavMenu
    {
        [Parameter]
        public bool InlineCollapsed { get; set; }
        [Parameter]
        public MenuItem BreadcrumbItemNav { get; set; }
        [Parameter]
        public EventCallback<MenuItem> BreadcrumbItemNavChanged { get; set; }

        public string[] OpenKeysNav { get; set; } = Array.Empty<string>();

        

        public async void OnMenuItemClickedNav(MenuItem menuItem)
        {
            BreadcrumbItemNav = menuItem;
            if (BreadcrumbItemNavChanged.HasDelegate)
            {
                await BreadcrumbItemNavChanged.InvokeAsync(BreadcrumbItemNav);
            }
        }


    }


}

<NavMenu InlineCollapsed="@Collapsed" @bind-BreadcrumbItemNav="BreadcrumbItemNav"></NavMenu>

<NavBreadcrumb BreadcrumbItemNav="@BreadcrumbItemNav"></NavBreadcrumb>

通过 @bind-BreadcrumbItemNav="BreadcrumbItemNav"即可将NavMenu组件的信息获取到，我们将获取到的信息在发送给面包屑来处理，NavBreadcrumb是单项绑定，只能接收信息，不能更改信息，这样我们就将MenuItem的信息传递给了面包屑，下面就是处理信息。

面包屑信息处理

using AntDesign;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Caviar.Shared
{
    partial class NavBreadcrumb
    {
        [Parameter]
        public MenuItem BreadcrumbItemNav 
        {
            get {
                return _breadcrumbItemNav;
            }
            set {
                _breadcrumbItemNav = value;
                CreatBreadcrumbItemNav(value);
            } 
        }

        MenuItem _breadcrumbItemNav;
        List<string> BreadcrumbItemArr { get; set; }

        string _homeTitle = "首页";

        void CreatBreadcrumbItemNav(MenuItem menuItem)
        {
            if (menuItem == null) return;
            Console.WriteLine(menuItem.RouterLink);
            var breadcrumbItemArr = new List<string>();
            var parent = menuItem.ParentMenu;
            while (parent != null)
            {
                breadcrumbItemArr.Insert(0, parent.Key);
                parent = parent.Parent;
            }
            if (menuItem.RouterLink != "/")
            {
                breadcrumbItemArr.Add(menuItem.Key);
            }
            else
            {
                _homeTitle = menuItem.Key;
            }
            BreadcrumbItemArr = breadcrumbItemArr;
        }

    }
}

代码种可以看到，BreadcrumbItemNav用来接收信息的变化，当有赋值事件发生，会调用CreatBreadcrumbItemNav，有时候会初始化，所以我们加个null判断，通过menuItem的parent可以获取到上层的信息，当parent==null时，说明已获取到最上层，我们将这些信息插入到一个string[]数组里面，用于动态生成面包屑。

面包屑生成

<Breadcrumb>
    <BreadcrumbItem>
        <a href="/">@_homeTitle</a>
    </BreadcrumbItem>
    @if (BreadcrumbItemArr != null)
    {
        @foreach (var item in BreadcrumbItemArr)
        {
            <BreadcrumbItem>
                @item
            </BreadcrumbItem>
        }

    }

</Breadcrumb>

我们默认会有首页信息，并且可以导航到首页，然后foreach生成BreadcrumbItem。但是我们需要注意的，我读取的时key作为title，这就意味key不可重复，并且key有可能和menuItem所显示的值不一样，这样可以更灵活操作，当然我们也可以更加灵活的获取其他的值。

代码地址