在Angular中,可以使用Router
来实现面包屑导航。默认情况下,Router
会追踪导航路径并根据路径生成面包屑。如果不想追踪导航路径,可以使用自定义的面包屑服务来实现。
以下是一个基本的示例:
import { Injectable } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';
@Injectable()
export class BreadcrumbService {
breadcrumbs: { label: string, url: string }[] = [];
constructor(private router: Router, private route: ActivatedRoute) {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe(() => {
this.generateBreadcrumbs(this.route.root);
});
}
generateBreadcrumbs(route: ActivatedRoute, url: string = '', breadcrumbs: { label: string, url: string }[] = []): void {
const children: ActivatedRoute[] = route.children;
if (children.length === 0) {
return;
}
for (const child of children) {
const routeUrl: string = child.snapshot.url.map(segment => segment.path).join('/');
if (routeUrl !== '') {
url += `/${routeUrl}`;
}
const label = child.snapshot.data['breadcrumb'];
if (label !== undefined) {
breadcrumbs.push({ label, url });
}
this.generateBreadcrumbs(child, url, breadcrumbs);
}
}
}
BreadcrumbService
:import { Component, OnInit } from '@angular/core';
import { BreadcrumbService } from './breadcrumb.service';
@Component({
selector: 'app-breadcrumb',
template: `
`
})
export class BreadcrumbComponent implements OnInit {
breadcrumbs: { label: string, url: string }[] = [];
constructor(private breadcrumbService: BreadcrumbService) {}
ngOnInit() {
this.breadcrumbs = this.breadcrumbService.breadcrumbs;
}
}
breadcrumb
数据:import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
{ path: '', component: HomeComponent, data: { breadcrumb: 'Home' } },
{ path: 'about', component: AboutComponent, data: { breadcrumb: 'About' } }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
来显示面包屑。这样,当导航到不同的路由时,面包屑会根据路由配置中的breadcrumb
数据自动生成。
上一篇:Angular面包屑
下一篇:Angular面试问题