前言
在前端开发中，面包屑导航栏是一个比较常用的功能，而 ngx-breadcrumb 是一个方便易用的 npm 包，它可以快速给我们的应用添加面包屑导航功能。
本文将分为以下几个部分介绍 ngx-breadcrumb 的使用方法：
- 安装和配置 ngx-breadcrumb
- 如何使用 ngx-breadcrumb
- 自定义面包屑导航
安装和配置 ngx-breadcrumb
在项目中使用 ngx-breadcrumb 首先需要进行安装，可以通过 npm 进行安装：
npm install ngx-breadcrumb --save
安装完成之后，需要在 app.module.ts 中进行配置：
-- -------------------- ---- -------
-- -------------
------ - ---------------- - ---- -----------------
-----------
-------- -
---------------------------
-- ---
--
------------- -
-------------
-- ---
--
---------- --------------
--
------ ----- --------- - -ngx-breadcrumb 现在已经可以在您的应用中使用了，我们接下来将在下一节中详细讲解如何使用它。
如何使用 ngx-breadcrumb
首先，在需要添加面包屑导航的组件中引入 BreadcrumbService：
-- -------------------- ---- ------- -- -------------------- ------ - --------- - ---- ---------------- ------ - ----------------- - ---- ----------------- ------------ --------- -------------- ------------ --------------------------- ---------- --------------------------- -- ------ ----- ---------------- - ------------------- ------------------ ------------------ -- -
在组件的构造函数中注入 BreadcrumbService，这将使我们能够向 ngx-breadcrumb 中动态添加面包屑。
当我们需要为当前路由动态添加面包屑时，通过 breadcrumbService 添加：
-- -------------------- ---- -------
-- --------------------
------ - --------- - ---- ----------------
------ - ----------------- - ---- -----------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- -
------------------- ------------------ ------------------ -
---------------------------------------------------------- -----------
-
-现在，当我们在路由中导航到 /example 页面时，页面顶部将会显示 'Example' 字样的面包屑导航。
自定义面包屑导航
除了可以在组件中添加静态的面包屑，ngx-breadcrumb 也支持更加灵活的动态渲染面包屑。例如，我们可以将面包屑导航的文本动态地绑定到一个变量，这样就能够实现不同情况下的不同面包屑文本。
-- -------------------- ---- -------
-- --------------------
------ - --------- - ---- ----------------
------ - ----------------- - ---- -----------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- -
-------------------- -------
------------------- ------------------ ------------------ -
------------------------ - ----------
---------------------------------------------------------- -------- -- -
------ ------------------------ - - - - - -------------
---
-
-在这个例子中，我们定义了一个 currentFriendlyName 变量，并将它绑定到作为导航文本的展示。我们还在路由中动态添加了一个参数地址 '/example/:id'，这个参数将会通过回调函数的参数传递到前端页面上。
在模板中使用 ngx-breadcrumb，需要在模板中添加 <ngx-breadcrumb> 标签：
<!-- example.component.html --> <ngx-breadcrumb></ngx-breadcrumb> <h1>Example component</h1>
总结
本文介绍了如何在 Angular 应用中使用 ngx-breadcrumb 包。它是一个非常易用的 npm 包，可以在很短的时间内为您的应用添加面包屑导航功能。如果您需要在应用中添加面包屑导航，可以尝试使用 ngx-breadcrumb，它将为您带来更加方便的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f86238a385564ab6cd3