const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{ path: 'child', component: ChildComponent },
{ path: 'second-child', component: SecondChildComponent }
]
}
];
Parent Component
import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
@Injectable()
export class BreadcrumbService {
breadcrumbs: Array
然后在每个需要显示面包屑的组件中,都需要调用面包屑服务的addBreadcrumb方法来更新面包屑。例如在父组件中:
export class ParentComponent implements OnInit {
constructor(private breadcrumbService: BreadcrumbService) {}
ngOnInit() {
this.breadcrumbService.addBreadcrumb();
}
}
在模板中显示面包屑: