在前端开发中，我们经常需要在网站或应用中添加面包屑导航功能，以方便用户查看自己所处的位置。ngx-breadcrumbs 是一款基于 Angular 框架的 NPM 包，可以帮助我们快速简便地实现面包屑导航组件。
1. 安装
第一步是安装 ngx-breadcrumbs 包，我们可以通过 npm 命令来进行安装，具体如下：
npm install ngx-breadcrumbs --save
需要注意的是，使用 ngx-breadcrumbs 需要在项目中引入 Angular 的核心模块 CommonModule。
在项目中添加 CommonModule 的步骤如下：
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
-----------
-------- -
------------
--
-- ---
--
------ ----- --------- - -2. 使用方法
在项目中使用 ngx-breadcrumbs，我们首先需要在对应的路由配置中设置面包屑导航，具体如下：
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------
------ ----- ------- ------ - -
-
----- ---
---------- --------------
----- -
----------- ------
-
--
-
----- --------
---------- ---------------
----- -
----------- -------
--
-------- -
------------ -------------------
-
--
-- ---
--在以上代码中，我们通过 data 属性中的 breadcrumb 字段来设置每个路由对应的面包屑导航标题，同时在 resolve 属性中添加 BreadcrumbsResolver 来让 ngx-breadcrumbs 自动获取面包屑导航数据。
接下来就是在组件中使用 ngx-breadcrumbs，我们需要通过以下代码获取面包屑导航数据和当前路由对象：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- ------- ------ - ---- ------------------
------ - ---------- - ---- ------------------
------------
--------- ------------
------------ -------------------------
---------- --------------------------
--
------ ----- -------------- ---------- ------ -
------------ -------------
------------- -------
------------------- ------ --------------- ------- ------- ------- - -
----------- ---- -
---------------- - -------------------------------------
----------------- - ---------------------------
-
-在以上代码中，我们通过 ActivatedRoute 和 Router 服务来获取当前路由对象，并通过注入 BreadcrumbsResolver 来获取面包屑导航数据，最终将数据赋值到组件中的变量中。
最后，在组件的 HTML 模板中通过 ngx-breadcrumbs 的指令来渲染面包屑导航组件：
<nav *ngIf="breadcrumbs?.length">
<ol class="breadcrumbs">
<li *ngFor="let breadcrumb of breadcrumbs; let last = last" [ngClass]="{'breadcrumb_last': last}">
<a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
</li>
</ol>
</nav>以上代码中，我们使用了 Angular 中的 *ngIf 指令来判断当前是否存在面包屑导航数据，如果有则渲染面包屑导航 HTML 模板，同时使用 *ngFor 指令来遍历面包屑导航数据，最终通过 [routerLink] 属性来设置面包屑导航项的路由链接。
3. 示例代码
最后，我们提供一份 ngx-breadcrumbs 的使用示例代码供大家参考：
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
------ - -------- - ---- ----------------
------ - -------------------- -------------------- - ---- ------------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - ---------------- - ---- ------------------------------
----- ------- ------ - -
-
----- ---
---------- --------------
----- -
----------- ------
-
--
-
----- --------
---------- ---------------
----- -
----------- -------
--
-------- -
------------ -------------------
-
--
-
----- ----------
---------- -----------------
----- -
----------- -------- ---
-
-
--
-----------
------------- -
--------------
---------------
----------------
--
-------- -
-------------
---------------------------- - ----------------------- -------- ---
------------------------------
--
-------- ---------------
--
------ ----- ---------------- - -<nav *ngIf="breadcrumbs?.length">
<ol class="breadcrumbs">
<li *ngFor="let breadcrumb of breadcrumbs; let last = last" [ngClass]="{'breadcrumb_last': last}">
<a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
</li>
</ol>
</nav>通过本篇文章的介绍和示例代码，相信大家已经掌握了如何使用 ngx-breadcrumbs 进行面包屑导航功能的实现。同时也希望大家能够在实践中不断学习和提高，进一步提高自身的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057ae681e8991b448eb6ce