Angular-Breadcrumb是一个基于Angular框架的面包屑导航组件，可以帮助我们在页面中添加易于理解和导航的面包屑导航。
安装
要使用Angular-Breadcrumb，首先需要通过npm安装它。在命令行中运行以下命令：
npm install angular-breadcrumb --save
安装完成后，在你的app.module.ts文件中加入下列代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ---------------- - ---- --------------------- ----------- -------- --------------- ------------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- - -展开代码
使用
Angular-Breadcrumb提供了两种方式来创建面包屑导航：通过路由配置和手动设置。
路由配置
在路由定义上添加 data 对象来定义路由的面包屑属性，如下所示：
const appRoutes: Routes = [ { path: '', component: HomeComponent, data: { breadcrumb: 'Home' } }, { path: 'products', component: ProductsComponent, data: { breadcrumb: 'Products' } }, { path: 'product/:id', component: ProductDetailComponent, data: { breadcrumb: 'Product {{ product.title }}' } } ];
然后在你的模板中添加 <breadcrumb></breadcrumb> 元素即可显示面包屑导航：
<breadcrumb></breadcrumb>手动设置
你也可以通过 BreadcrumbService 服务手动设置面包屑导航。在你的组件中注入该服务，然后使用 set() 方法来设置面包屑数据：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------------- - ---- --------------------- ------------ --------- --------------------- ------------ --------------------------------- -- ------ ----- ---------------------- - ------------------- ------------------ ------------------ - ------------------------------------------ -------- -------- - -展开代码
然后在你的模板中添加 <breadcrumb></breadcrumb> 元素即可显示面包屑导航：
<breadcrumb [useLocation]="true"></breadcrumb>
高级用法
Angular-Breadcrumb还支持许多高级用法，如自定义分隔符和设置默认的面包屑导航。以下是一些代码示例：
自定义分隔符
@NgModule({ imports: [ BreadcrumbModule.forRoot({ separator: ' > ' }) ] })
设置默认面包屑导航
@NgModule({ imports: [ BreadcrumbModule.forRoot({ defaultBreadcrumb: 'Home' }) ] })
总结
Angular-Breadcrumb是一个非常实用的Angular组件，可以帮助我们轻松地添加易于理解和导航的面包屑导航。通过路由配置或手动设置，我们可以快速创建面包屑导航，并且还支持许多高级用法，如自定义分隔符和设置默认的面包屑导航。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35736
