这是一个解决方案,展示了如何在Angular中使用参数在面包屑中显示相关信息。请注意,这只是一个示例,你可以根据自己的需求进行调整和修改。
路由定义中指定参数:
{ path: 'product/:id', component: ProductComponent }
面包屑组件:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-breadcrumb',
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.css']
})
export class BreadcrumbComponent implements OnInit {
productId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
this.productId = this.route.snapshot.params['id'];
}
}
面包屑组件的HTML模板:
这是一个基本示例,当用户访问/product/123
时,面包屑将显示为Home / 123
。你可以根据自己的需求进行修改,例如添加更多的链接或显示更多的参数信息。