我想将面包屑添加到我的页面。我有很多路线,但都没有孩子。
我尝试通过创建一个子项来做到这一点,但是到公共页面的重定向太多了。例如;
主页 > 图书馆 > 课程 > 课程名称
分配的课程 > 课程名称
当课程名称的路线相同时,我应该如何子化它们,或者有没有办法不沿着路线子化?
我试着按照路线去做,我期望的结果是;
首页 > 图书馆 > 课程 > 课程名称 分配的课程 > 课程名称
但是当我这样做时,当涉及到课程名称时,它会自动发生这样的情况;
主页 > 图书馆 > 课程 > 课程名称
这是在 Angular 中添加面包屑的简单方法:
// breadcrumb.service.ts
import { Injectable } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class BreadcrumbService {
breadcrumbs: Array<{ label: string, url: string }> = [];
constructor(private router: Router, private activatedRoute: ActivatedRoute) {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe(() => {
this.breadcrumbs = this.createBreadcrumbs(this.activatedRoute.root);
});
}
private createBreadcrumbs(route: ActivatedRoute, url: string = '', breadcrumbs: Array<{ label: string, url: string }> = []): Array<{ label: string, url: string }> {
const children: ActivatedRoute[] = route.children;
if (children.length === 0) {
return breadcrumbs;
}
for (const child of children) {
const routeURL: string = child.snapshot.url.map(segment => segment.path).join('/');
if (routeURL !== '') {
url += `/${routeURL}`;
}
breadcrumbs.push({ label: child.snapshot.data['breadcrumb'], url: url });
return this.createBreadcrumbs(child, url, breadcrumbs);
}
return breadcrumbs;
}
}
// app-routing.module.ts
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
data: { breadcrumb: 'Home' },
},
{
path: 'library',
component: LibraryComponent,
data: { breadcrumb: 'Library' },
children: [
{
path: 'lessons',
component: LessonsComponent,
data: { breadcrumb: 'Lessons' },
children: [
{
path: ':lessonName',
component: LessonDetailComponent,
data: { breadcrumb: 'Lesson Name' },
},
],
},
// Other library routes...
],
},
// Other routes...
];
// breadcrumb.component.ts
import { Component, OnInit } from '@angular/core';
import { BreadcrumbService } from './breadcrumb.service';
@Component({
selector: 'app-breadcrumb',
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.css'],
})
export class BreadcrumbComponent implements OnInit {
breadcrumbs: Array<{ label: string, url: string }> = [];
constructor(private breadcrumbService: BreadcrumbService) {}
ngOnInit(): void {
this.breadcrumbs = this.breadcrumbService.breadcrumbs;
}
}
<!-- app.component.html -->
<app-breadcrumb></app-breadcrumb>
<router-outlet></router-outlet>
<!-- breadcrumb.component.html -->
<nav>
<ng-container *ngFor="let breadcrumb of breadcrumbs; let last = last">
<ng-container *ngIf="!last">
<a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a> >
</ng-container>
<ng-container *ngIf="last">
{{ breadcrumb.label }}
</ng-container>
</ng-container>
</nav>