本文将介绍 npm 包 @tjadli/ngx-breadcrumbs 的使用教程。@tjadli/ngx-breadcrumbs 是一个 Angular 组件，用于在 Web 页面中显示面包屑导航。它可以帮助前端开发人员更方便地搭建 Web 应用程序，提高用户的使用体验。
配置环境
使用 @tjadli/ngx-breadcrumbs，你需要在你的 Angular 项目中安装它。在开始之前，请确保你的电脑上已经安装了 npm，如果没有，请从 官网 下载安装。
安装 @tjadli/ngx-breadcrumbs
使用以下命令在 Angular 项目中安装 @tjadli/ngx-breadcrumbs。
npm install @tjadli/ngx-breadcrumbs --save
引入 BreadcrumbsModule 并配置路由
在你的 Angular 项目的 AppModule 中引入 BreadcrumbsModule 并配置路由。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- --------------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
------ - ---------------- - ---- ----------------------
------ - ---------------------- - ---- -----------------------------
-----------
------------- -
-------------
--------------
-----------------
----------------------
--
-------- -
--------------
----------------------------
----------------------
- ----- --- ---------- -------------- ----- - ----------- ------ - --
- ----- ---------- ---------- ----------------- ----- - ----------- --------- - --
- ----- -------------- ---------- -----------------------
----- - ----------- -------- ------- - -
--
--
---------- --------------
--
------ ----- --------- - -在模板中使用组件
在你的模板中使用 crumb 组件来展示面包屑导航。
<app-breadcrumbs></app-breadcrumbs> <!-- Your content goes here -->
示例
下面是一个具体的示例。我们将创建一个产品列表和产品详情页面，并在页面中展示面包屑导航。
创建项目
使用以下命令创建一个新的 Angular 项目。
ng new my-app
创建产品相关代码
在 src/app 文件夹下创建以下文件。
- home.component.html - 显示一个链接到产品列表的按钮。
- product.component.html - 显示产品列表和产品链接。
- product-detail.component.html - 显示产品详情。
home.component.html
<h2>Home</h2> <a routerLink="/product">Products</a>
product.component.html
<h2>Product</h2>
<app-breadcrumbs></app-breadcrumbs>
<ul>
<li *ngFor="let product of products">
<a routerLink="/product/{{product.id}}" appBreadCrumb>{{product.name}}</a>
</li>
</ul>在 product.component.html 的 a 标签中添加了 appBreadCrumb 属性，这是为了将这个链接添加到面包屑导航中。@tjadli/ngx-breadcrumbs 会自动从路由配置中提取面包屑导航信息。
product-detail.component.html
<h2>Product Detail</h2>
<app-breadcrumbs></app-breadcrumbs>
<div>
<h3>{{product.name}}</h3>
<p>{{product.description}}</p>
</div>在路由中设置面包屑导航
在 src/app/app.module.ts 中添加路由配置。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- --------------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
------ - ---------------- - ---- ----------------------
------ - ---------------------- - ---- -----------------------------
-----------
------------- -
-------------
--------------
-----------------
----------------------
--
-------- -
--------------
----------------------------
----------------------
- ----- --- ---------- -------------- ----- - ----------- ------ - --
- ----- ---------- ---------- ----------------- ----- - ----------- --------- - --
- ----- -------------- ---------- -----------------------
----- - ----------- -------- ------- - -
--
--
---------- --------------
--
------ ----- --------- - -编写服务和模拟数据
在 src/app 目录下创建一个 products.service.ts 文件，并添加以下代码。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ ----- ------- -
------------------ --- ------- ------ ----- ------- ------ ------------ ------- --
-
-------------
------ ----- --------------- -
------- --------- ----------
------------- -
------------- - -
--- ---------- -------- --- ------------ --- ------- ----
--- ---------- -------- --- ------------ --- ------- ----
--- ---------- -------- --- ------------ --- ------- ---
--
-
------------------ ------- -
------ -------------------------- -- ---------- --- -----
-
------------- -
------ --------------
-
-实现组件
在 src/app/home.component.ts 中添加以下代码。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -
-------------
-- ----------------------------------
-
--
------ ----- ------------- --在 src/app/product.component.ts 中添加以下代码。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- ---------------------
------------
--------- -
----------------
-----------------------------------
----
--- ----------- ------- -- ----------
-- ------------------------------------ ----------------------------------
-----
-----
-
--
------ ----- ---------------- -
--------- ------
------------------- ---------------- ---------------- -
------------- - ------------------------------
-
-在 src/app/product-detail.component.ts 中添加以下代码。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------ - --------------- - ---- ---------------------
------------
--------- -
----------- -----------
-----------------------------------
-----
-------------------------
------------------------------
------
-
--
------ ----- ---------------------- -
-------- ----
------------------- ---------------- ---------------- ------- ------ --------------- -
------------ - --------------------------------------------------------------
-
-确认效果
在终端中运行以下命令，以启动应用。
ng serve --open
在浏览器中打开 http://localhost:4200，你应该能看到页面中的面包屑导航。
总结
本文介绍了如何使用 @tjadli/ngx-breadcrumbs 在 Angular 应用程序中添加面包屑导航。我们创建了一个产品列表和产品详情页面，并且成功地在页面中展示了面包屑导航。最后，希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c63