前言
对于 Web 应用程序来说，面包屑（Breadcrumbs）是一种非常有用的导航元素。它可以让用户快速了解当前页面的位置，并提供返回上一级页面的功能。而 @nodeableio/ngx-breadcrumbs 就是一款非常好用的 Angular 面包屑组件，它可以帮助 Angular 开发者快速构建出美观而实用的面包屑导航。
使用指南
安装
使用 @nodeableio/ngx-breadcrumbs 之前，你需要先使用 npm 安装它。在命令行工具中输入以下命令：
npm install @nodeableio/ngx-breadcrumbs --save
引入
安装完成之后，在你的 app.module.ts 文件中引入 @nodeableio/ngx-breadcrumbs：
-- -------------------- ---- -------
------ - -------------------- - ---- ------------------------------
-----------
-------- -
-- ---
---------------------
--
-- ---
--
------ ----- --------- - -配置
在你的模板文件中使用 ngx-breadcrumbs 面包屑组件：
<ngx-breadcrumbs></ngx-breadcrumbs>
如果你需要自定义面包屑组件的外观或者修改面包屑的显示文本、显示顺序等等，你需要使用 ngx-breadcrumbs 组件提供的相关配置项。
具体来说，你可以设置以下属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| useTranslation | boolean | false | 是否启用翻译服务 |
| translations | Translation[] | [] | 翻译信息数组，只有在 useTranslation 为 true 时生效 |
| transforms | Transform[] | [] | 变换信息数组，用于组织和处理面包屑数据 |
| separator | string | / | 面包屑分隔符 |
| homeIcon | string | home | 主页图标名称 |
| homeUrl | string | / | 主页链接地址 |
使用
现在你已经可以在你的应用程序中使用 ngx-breadcrumbs 了！
假设你有一个基于 Angular 的应用程序，其中包含如下路由：
-- -------------------- ---- -------
----- ------- ------ - -
-
----- ---
----------- -------
---------- -------
--
-
----- -------
---------- --------------
----- -
------ -------
--
--
-
----- ----------
---------- -----------------
----- -
------ ----------
--
--------- -
-
----- ---------
---------- -----------------------
----- -
------ -------- --------
--
--
--
--
--在以上路由配置中，根路径（''）通过重定向到 'home' 页面。'home' 页面和 'product' 页面都定义了一个名为 data.title 的属性，用于记录页面名称。'product' 页面中还定义了一个子路由 'detail'。
现在，你需要在你的应用程序中添加面包屑导航，以方便用户对页面之间的关系进行理解和操作。因此，你需要在每个页面上动态地生成面包屑导航。
在 Angular 中，动态生成面包屑导航的方法非常简单，你只需要将代表面包屑导航的数组传递给 ngx-breadcrumbs 组件即可：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ------ - ---- ------------------
------ - ---------- - ---- ------------------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
------------ ------------ - ---
------------------- ------- ------- -
------------------------------- -- -
-- ------ ---------- -------------- -
---------------- - ---
-------------------------------------------------------
-
---
-
-------------------------- --------------- ---- ------ - --- ------------ ------------ - --- -
----- -------- - ---------------
-- ---------------- --- -- -
------ ------------
-
--- ------ ----- -- --------- -
----- -------- - -------------------------------- -- ------------------------
----- ------- - ---------------------
----------------------------- -
------------------ ------ -------------------------- ---- ------- ---
-
------------------------------- -------- -------------
-
-
-在以上代码中，我们首先通过订阅路由导航事件（NavigationEnd）实现了在路由改变时更新面包屑导航的功能。接着，我们定义了生成面包屑导航的方法 generateBreadcrumbs()，它会递归搜索当前页面的路由树，生成面包屑导航数组并将其赋值给 breadcrumbs。最后，我们将 breadcrumbs 数组传递给 ngx-breadcrumbs 组件以显示当前页面的面包屑导航。
最终，你的模板文件应该类似于这样：
<ngx-breadcrumbs [items]="breadcrumbs"></ngx-breadcrumbs>
自定义面包屑导航
除了使用以上方法自动生成面包屑导航之外，你还可以使用 @nodeableio/ngx-breadcrumbs 提供的其他 API 来自定义面包屑导航的生成方式和显示效果。
如果你需要自定义面包屑导航中的文本、链接、CSS 样式等，你可以在定义面包屑导航数组时为每个导航项指定相应的属性值。比如，以下面包屑导航数组中，我们为 'product detail' 页面单独设置了一个 CSS 类型：
breadcrumbs: Breadcrumb[] = [
{ label: 'Home', url: '/home' },
{ label: 'Product', url: '/product' },
{ label: 'Product Detail', url: '/product/detail', cssClass: 'detail-page' },
];然后，我们就可以在样式表中使用 .detail-page 类型来为 'product detail' 页面自定义样式：
.detail-page {
text-decoration: underline;
color: red;
}此外，@nodeableio/ngx-breadcrumbs 还为你提供了许多其他选项，如：
- separator：面包屑导航中的分隔符，默认为 '/'；
- homeIcon：主页图标的名称，默认为 'home'；
- homeUrl：主页链接的地址，默认为 '/'；
- useTranslation：是否启用翻译服务，默认为 false；
- translations：一个 Translation[] 数组，用于配置翻译信息；
- transforms：一个 Transform[] 数组，用于实现各种组织和处理面包屑数据的逻辑。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ------ - ---- ------------------
------ - ---------- - ---- ------------------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
------------ ------------ - ---
------------------- ------- ------- -
------------------------------- -- -
-- ------ ---------- -------------- -
---------------- - ---
-------------------------------------------------------
-
---
-
-------------------------- --------------- ---- ------ - --- ------------ ------------ - --- -
----- -------- - ---------------
-- ---------------- --- -- -
------ ------------
-
--- ------ ----- -- --------- -
----- -------- - -------------------------------- -- ------------------------
----- ------- - ---------------------
----------------------------- -
------------------ ------ -------------------------- ---- ------- ---
-
------------------------------- -------- -------------
-
-
-<ngx-breadcrumbs [items]="breadcrumbs"></ngx-breadcrumbs>
总结
在本文中，我们介绍了如何使用 @nodeableio/ngx-breadcrumbs NPM 包来构建出美观而实用的 Angular 应用程序面包屑导航。我们还讨论了如何使用该包的各种选项和方法自定义面包屑导航的生成方式和显示效果。如果你需要为你的 Angular 应用程序添加面包屑导航，那么 @nodeableio/ngx-breadcrumbs 定会是你的首选之一！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe881e8991b448dd8f3