syncfusion-angular-breadcrumb

实现 Syncfusion Angular Breadcrumb

Breadcrumb 组件提供导航辅助功能，可显示用户在页面或分区层级结构中的当前位置。它提供指向上级的可点击链接，并以可视化方式呈现面包屑路径。

何时使用此技能

在以下情况下使用此技能：

• 在 Angular 应用中实现面包屑导航路径
• 显示用户在页面层级结构中的位置
• 支持导航至上级分区
• 为面包屑项添加图标和视觉效果
• 使用多种显示模式处理溢出
• 使用模板自定义面包屑外观
• 配置面包屑项的数据绑定

组件概览

Syncfusion Angular Breadcrumb 组件（ejs-breadcrumb）属于 @syncfusion/ej2-angular-navigations 包。它以层级顺序显示一系列链接，每个项代表一个导航层级。该组件支持：

• 多种数据绑定方式：使用指令、基于 URL 或静态配置设置项
• 图标支持：字体图标、图像和 SVG 图形
• 导航控制：启用/禁用导航、在新标签页中打开、导航至最后一项
• 溢出处理：针对空间受限布局提供 6 种不同模式
• 模板自定义：自定义项模板和分隔符
• 事件处理：使用 beforeItemRender 进行动态自定义

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装和包配置
• 模块导入和 enableRipple 配置
• 渲染基本的面包屑组件
• 使用 e-breadcrumb-items 指令添加项
• 启用和禁用导航功能
• CSS 导入和主题应用

数据绑定

📄 阅读： references/data-binding.md

• 将项作为带属性的标签指令
• 根据当前 URL 生成项
• 为面包屑项配置静态 URL
• 使用 url 属性绑定导航路径
• 使用 beforeItemRender 事件进行自定义
• 自定义生成的项文本

图标和视觉效果

📄 阅读： references/icons-and-visuals.md

• 使用 iconCss 属性添加字体图标
• 在面包屑项中使用图像图标
• 实现 SVG 图标
• 图标位置（左对齐和右对齐）
• 不带文本的纯图标项
• 仅首项显示图标的模式

导航配置

📄 阅读： references/navigations.md

• 相对 URL 配置
• 绝对 URL 配置
• enableNavigation 属性控制
• 使用 enableActiveItemNavigation 导航至最后一项
• 在新标签页或页面中打开面包屑项
• 链接 target 和导航行为

API 参考

📄 阅读： references/api-reference.md

• 面包屑的所有属性、方法和事件
• BreadcrumbItemModel 详情
• BreadcrumbBeforeItemRenderEventArgs 和 BreadcrumbClickEventArgs
• destroy 等组件方法

溢出处理

📄 阅读： references/overflow-handling.md

• maxItems 和 overflowMode 属性
• 用于紧凑显示的折叠模式
• 带下拉子菜单的菜单模式
• 用于多行布局的换行模式
• 带水平滚动条的滚动模式
• 动态可见的隐藏模式
• 不处理溢出的 None 模式

模板和自定义

📄 阅读： references/templates-customization.md

• 使用 itemTemplate 自定义项渲染
• 使用 separatorTemplate 自定义分隔符
• 自定义分隔符图标和样式
• 条件项模板
• 组件集成（例如 ChipList）
• 高级 CSS 自定义

快速入门示例

包含项和导航功能的基本面包屑：

import { BreadcrumbModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [BreadcrumbModule],
  standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
    <ejs-breadcrumb [enableNavigation]="true">
      <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-icons e-home" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Products" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Electronics" url="url"></e-breadcrumb-item>
        <e-breadcrumb-item text="Laptops" url="url"></e-breadcrumb-item>
      </e-breadcrumb-items>
    </ejs-breadcrumb>
  </div>`
})
export class AppComponent {}

常见模式

禁用导航

设置 enableNavigation="false" 以阻止点击项：

<ejs-breadcrumb [enableNavigation]="false">
  <e-breadcrumb-items>
    <e-breadcrumb-item text="Home"></e-breadcrumb-item>
  </e-breadcrumb-items>
</ejs-breadcrumb>

为项目添加图标

使用 iconCss 和 Syncfusion 图标类：

<e-breadcrumb-item iconCss="e-icons e-home" text="Home"></e-breadcrumb-item>

处理溢出

使用 maxItems 和 overflowMode 适配空间受限的布局：

<ejs-breadcrumb [maxItems]="3" overflowMode="Menu">

启用最后一项导航

允许点击当前项／最后一项：

<ejs-breadcrumb [enableActiveItemNavigation]="true">

自定义分隔符

将默认分隔符替换为自定义图标：

<ng-template #separatorTemplate>
  <span class='e-bicons e-arrow'></span>
</ng-template>

主要属性

属性	类型	默认值	用途
items	Array	-	BreadcrumbItemModel 项数组
url	String	-	用于根据路径生成项目的静态 URL
enableNavigation	Boolean	true	启用／禁用项目点击导航
enableActiveItemNavigation	Boolean	false	允许点击当前项／最后一项
maxItems	Number	-	溢出前显示的最大项目数
overflowMode	String	'Menu'	溢出处理模式
itemTemplate	Template	-	用于自定义项目渲染的模板
separatorTemplate	Template	-	用于自定义分隔符的模板
cssClass	String	-	用于设置样式的 CSS 类
beforeItemRender	Event	-	项目渲染前触发的事件

常见用例

1. 电商导航：显示产品层级（主页 > 分类 > 子分类 > 产品）
2. 文件系统浏览器：显示文件夹路径，并提供可访问的父文件夹
3. 文档站点：显示文档层级中的面包屑路径
4. 博客导航：显示文章分类和当前文章位置
5. 管理面板：显示所在的区段和子区段
6. 多步骤表单：显示表单进度和完成步骤

---

后续步骤：

• 阅读 getting-started.md，设置面包屑组件
• 从 data-binding.md 中选择数据绑定方式
• 使用 icons-and-visuals.md 中的图标进行增强
• 从 navigations.md 配置导航
• 使用 overflow-handling.md 处理溢出
• 从 templates-customization.md 自定义模板