前言
ng8-breadcrumbs 是一个 Angular 的面包屑导航组件，适用于 Angular 8 及以上版本。使用它可以很快速的构建出界面比较复杂的面包屑导航组件，便于用户了解当前访问位置、功能路径等。
安装
首先需要在项目中安装 ng8-breadcrumbs，可以使用 npm 或 yarn 进行安装，命令如下：
npm install ng8-breadcrumbs --save
或者
yarn add ng8-breadcrumbs
使用
- 打开需要使用 ng8-breadcrumbs 的 module 文件，例如 app.module.ts，导入 Ng8BreadcrumbsModule。
import { Ng8BreadcrumbsModule } from 'ng8-breadcrumbs';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule, Ng8BreadcrumbsModule ],
bootstrap: [ AppComponent ]
})
export class AppModule {}- 在组件模板引入 Ng8BreadcrumbsDirective，并在相应位置使用 ng8Breadcrumb 指令。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------------- - ---- ------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
------------------- ------------ ------------------------ -
----------------------- -----
----------------------- ---------
-
-<nav ng8Breadcrumb>
<a *ngFor="let breadcrumb of breadcrumbs.list | async" [routerLink]="breadcrumb.url">{{breadcrumb.label}}</a>
</nav>示例代码
这里为大家提供一个完整的实例代码，只需在 app.component.ts 中添加以下代码，即可快速创建一个面包屑导航组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------------- - ---- ------------------
------------
--------- -----------
--------- -
---- --------------
-- ----------- ---------- -- ---------------- - ------ ------------------------------------------------------
------
----------
-------------------------------
--
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------ ------------------------ -
----------------------- -----
-
-深入学习
如果读者想要深入学习此 npm 包，可以阅读以下 API 文档。
Ng8BreadcrumbsDirective
| 名称 | 说明 | 类型 |
|---|---|---|
| breadcrumbs.list | 当前页面的面包屑导航列表 | BehaviorSubject<Breadcrumb[]> |
| breadcrumbs.add | 添加面包屑导航 | add(label: string, url: string, data?: any): void |
| breadcrumbs.remove | 移除面包屑导航 | remove(label: string): void |
| breadcrumbs.get | 获取面包屑导航 | get(label: string): Breadcrumb |
Ng8BreadcrumbsService
| 名称 | 说明 | 类型 |
|---|---|---|
| Ng8BreadcrumbsService.list | 当前页面的面包屑导航列表 | BehaviorSubject<Breadcrumb[]> |
| Ng8BreadcrumbsService.add | 添加面包屑导航 | add(label: string, url: string, data?: any): void |
| Ng8BreadcrumbsService.remove | 移除面包屑导航 | remove(label: string): void |
| Ng8BreadcrumbsService.get | 获取面包屑导航 | get(label: string): Breadcrumb |
总结
通过本篇文章，我们学习了如何使用 ng8-breadcrumbs 这个 npm 包来快速构建 Angular 中的面包屑导航组件，并提供了实际示例代码。同时，对 API 进行了精细的解读，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583c17