如何在Angular 7中实现面包屑
我正在尝试在基于Angular 7的应用程序中实现面包屑 下面提到了包含breadcrumb组件的根组件的HTML模板(breadcrumb位于路由器出口之外) 面包屑组件html文件如何在Angular 7中实现面包屑,angular,breadcrumbs,angular7,Angular,Breadcrumbs,Angular7,我正在尝试在基于Angular 7的应用程序中实现面包屑 下面提到了包含breadcrumb组件的根组件的HTML模板(breadcrumb位于路由器出口之外) 面包屑组件html文件 <nav aria-label='breadcrumb'> <ol class='breadcrumb'> <li *ngFor='let breadcrumb of breadcrumbs'> <a [routerLink]='[breadcru
<nav aria-label='breadcrumb'>
<ol class='breadcrumb'>
<li *ngFor='let breadcrumb of breadcrumbs'>
<a [routerLink]='[breadcrumb.url, breadcrumb.params]' routerLinkActive='active'>{{ breadcrumb.label }}</a>
</li>
</ol>
</nav>
但是我没有得到数据和参数用下面的代码更新面包屑组件ts文件中的路由器订阅逻辑
ngOnInit() {
this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.pipe(map(() => this.activatedRoute))
.pipe(map((route) => {
while (route.firstChild) { route = route.firstChild; }
return route;
}))
.pipe(filter(route => route.outlet === PRIMARY_OUTLET))
.subscribe(route => {
let snapshot = this.router.routerState.snapshot;
this.breadcrumbs = [];
let url = snapshot.url;
let routeData = route.snapshot.data;
console.log(routeData);
let label = routeData['breadcrumb'];
let params = snapshot.root.params;
this.breadcrumbs.push({
url: url,
label: label,
params: params
});
});
}
闪电战链接:
最近我实现了,和角面包屑模块。请检查这些模块,我希望这将有助于动态面包屑 我检查了你的模块,它们非常棒。但老实说,我更喜欢ng7引导程序面包屑,因为生成的html似乎更接近面包屑应该是什么。它会生成一个列表,而且对咏叹调也很友好。@CelsoSoares谢谢!。快乐编码:)(y)顺便说一句。在ng7引导面包屑上,是否可以为每个链接添加特定的类?例如,除了标签和url参数之外,您还有类似于类的东西吗?@CelsoSoares目前我们还没有提供此类功能,如果可能的话,创建一个票证一个未来的参考url:@Rajaramohanthavalam您应该只使用一个管道,任何副作用都应该在tap not subscribe中完成。请咨询rxjs docsI,我来晚了,但是你有没有看过xng面包屑。它提供了一个易于使用的解决方案面包屑的角度。您可以查看演示Angular应用程序,该应用程序在Angular中显示面包屑的使用情况-
<nav aria-label='breadcrumb'>
<ol class='breadcrumb'>
<li *ngFor='let breadcrumb of breadcrumbs'>
<a [routerLink]='[breadcrumb.url, breadcrumb.params]' routerLinkActive='active'>{{ breadcrumb.label }}</a>
</li>
</ol>
</nav>
const routes: Routes = [
{ path: 'folders', component: FolderManagementComponent, data: { breadcrumb: 'Home' } },
{ path: 'folders/list-documents', component: ListDocumentsComponent, data: { breadcrumb: 'Documents' } },
{ path: '', redirectTo: '/folders', pathMatch: 'full', data: { breadcrumb: 'Home' }}
];
ngOnInit() {
this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.pipe(map(() => this.activatedRoute))
.pipe(map((route) => {
while (route.firstChild) { route = route.firstChild; }
return route;
}))
.pipe(filter(route => route.outlet === PRIMARY_OUTLET))
.subscribe(route => {
let snapshot = this.router.routerState.snapshot;
this.breadcrumbs = [];
let url = snapshot.url;
let routeData = route.snapshot.data;
console.log(routeData);
let label = routeData['breadcrumb'];
let params = snapshot.root.params;
this.breadcrumbs.push({
url: url,
label: label,
params: params
});
});