在前端开发中，面包屑导航是非常常见的一种导航方式。在 Angular 6 中，我们可以通过使用一个名为 ng6-breadcrumbs 的 npm 包来轻松地实现面包屑导航功能。
本文将为大家详细介绍 npm 包 ng6-breadcrumbs 的使用方法，包括安装、配置以及基本使用。
安装
我们首先需要安装 ng6-breadcrumbs，可以使用以下命令进行安装：
npm install ng6-breadcrumbs --save
配置
安装完成后，我们还需要在 AppModule 中进行配置，将 ng6-breadcrumbs 导入并将其添加到 NgModule 的 providers 中：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------------- - ---- ------------------ ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - ---------------- - ---- ------------------------------ ----------- -------- - -------------- ------------------------------ -- ------------- - ------------- -------------- --------------- ---------------- -- ---------- --- ---------- - ------------ - -- ------ ----- --------- - -
基本使用
使用 ng6-breadcrumbs 的步骤如下：
- 在需要显示面包屑导航的组件中，定义面包屑项：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- ------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------- ---------- ------ -
------------------- ------------------ ------------------ - -
---------- -
------------------------------------------------------- --------
-
-- 在 HTML 模板中，使用 ng6-breadcrumbs 的组件进行渲染：
<ng6-breadcrumbs></ng6-breadcrumbs>
这样，我们就完成了一个基本的面包屑导航功能。
高级使用
在默认情况下，ng6-breadcrumbs 使用路由器配置来确定要显示的面包屑导航路径。但是，在某些情况下，我们可能需要手动修改面包屑导航路径。此时，我们可以使用 BreadcrumbService 中的方法。
以下是 BreadcrumbService 支持的几种方法：
addFriendlyNameForRoute(routeUrl: string, friendlyName: string): void：为指定路由添加友好名称。changeRoute(routeUrl: string, friendlyName: string): void：更改当前路由的名称和 URL。getBreadcrumbs(): Breadcrumb[]：获取当前面包屑导航路径。generateBreadcrumbs(): Breadcrumb[]：生成面包屑导航路径。
我们可以在组件的 ngOnInit() 方法中使用这些方法来修改面包屑导航路径：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------ ---------- - ---- ------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------- ---------- ------ -
------------------- ------------------ ------------------ - -
---------- -
------------------------------------------- --- -------
--- ------------ ------------ - ----------------------------------------
-------------------------
-
-上面的代码将当前路由的 URL 和名称都修改为了 My Home，并且在控制台中输出了面包屑导航路径。
示例代码
下面是一个完整的使用 ng6-breadcrumbs 的示例代码：
app.module.ts：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------------- - ---- ------------------ ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - ---------------- - ---- ------------------------------ ----------- -------- - -------------- ------------------------------ -- ------------- - ------------- -------------- --------------- ---------------- -- ---------- --- ---------- - ------------ - -- ------ ----- --------- - -
home.component.ts：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------ ---------- - ---- ------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------- ---------- ------ -
------------------- ------------------ ------------------ - -
---------- -
------------------------------------------------------- --------
-
-home.component.html：
<h2>Home Page</h2> <ng6-breadcrumbs></ng6-breadcrumbs>
about.component.ts：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- ------------------
------------
--------- ------------
------------ ------------------------
--
------ ----- -------------- ---------- ------ -
------------------- ------------------ ------------------ - -
---------- -
-------------------------------------------------------- ------ -----
-
-about.component.html：
<h2>About Us</h2> <ng6-breadcrumbs></ng6-breadcrumbs>
contact.component.ts：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- ------------------
------------
--------- --------------
------------ --------------------------
--
------ ----- ---------------- ---------- ------ -
------------------- ------------------ ------------------ - -
---------- -
---------------------------------------------------------- -------- -----
-
-contact.component.html：
<h2>Contact Us</h2> <ng6-breadcrumbs></ng6-breadcrumbs>
app.component.html：
<h1>{{ title }}</h1>
<nav>
<a routerLink="/home">Home</a>
<a routerLink="/about">About Us</a>
<a routerLink="/contact">Contact Us</a>
</nav>
<router-outlet></router-outlet>结语
通过本文的介绍，我们学习了如何在 Angular 6 中使用 ng6-breadcrumbs 包来实现面包屑导航功能。这不仅可以提高我们的开发效率，而且可以为用户提供更好的用户体验。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f1d9381d61a3540dae