在Angular中,可以使用Angular Router和Angular Material来实现面包屑导航。以下是一个简单的示例:
npm install @angular/router
npm install @angular/material
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
ContactComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent }
]),
MatToolbarModule,
MatIconModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-breadcrumb',
template: `
home
{{ breadcrumb.label }}
{{ breadcrumb.label }}
>
`
})
export class BreadcrumbComponent implements OnInit {
breadcrumbs: Array<{ label: string, url: string }> = [];
constructor(private router: Router, private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.breadcrumbs = [];
this.parseRoute(this.activatedRoute.root);
}
});
}
parseRoute(route: ActivatedRoute) {
if (route.routeConfig && route.routeConfig.data && route.routeConfig.data.breadcrumb) {
let url = route.routeConfig.path;
let label = route.routeConfig.data.breadcrumb;
let breadcrumb = { label: label, url: url };
this.breadcrumbs.push(breadcrumb);
}
if (route.firstChild) {
this.parseRoute(route.firstChild);
}
}
}
import { Component } from '@angular/core';
@Component({
template: `
About
`,
data: {
breadcrumb: 'About'
}
})
export class AboutComponent { }
import { Component } from '@angular/core';
@Component({
template: `
Contact
`,
data: {
breadcrumb: 'Contact'
}
})
export class ContactComponent { }
使用以上代码示例,你可以在Angular应用程序中实现一个简单的面包屑导航功能。