angular - 页面重新加载时面包屑未以 Angular 7 显示
问题描述
我已经使用下面的代码 breadcrumbs.component.ts 在我的 Angular 7 应用程序中实现了面包屑
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
import { filter, map } from 'rxjs/operators';
@Component({
selector: 'blm-bread-crumbs',
templateUrl: './bread-crumbs.component.html',
styleUrls: ['./bread-crumbs.component.scss']
})
export class BreadCrumbsComponent implements OnInit {
breadcrumbs: any = [];
constructor(private router: Router, private activatedRoute: ActivatedRoute) { }
ngOnInit() {
debugger
this.router.events
.pipe(filter((event: any) => 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 => {
// debugger
let snapshot = this.router.routerState.snapshot;
this.breadcrumbs = [];
let url = snapshot.url;
let routeData = route.snapshot.data;
console.log(routeData);
routeData.breadcrumb.forEach((item: any) => {
// console.log(item);
this.breadcrumbs.push({
url: item.url,
label: item.label,
terminalOnly: item.terminalOnly
});
});
});
}
renderRoute(data: any) {
if (data.url) {
this.router.navigate([data.url]);
}
}
}
下面是我的面包屑.component.html
<div class="breadcrum">
<span *ngFor="let data of breadcrumbs">
<a (click)="renderRoute(data)">
{{data.label}}</a><span *ngIf="!data.terminalOnly">>></span>
</span>
</div>
我的问题是页面重新加载/刷新后面包屑没有加载/消失。当我第一次登录时,面包屑也没有显示
请帮我解决问题提前谢谢
解决方案
我的应用程序具有相同的功能,但我的工作正常。如果可能有帮助,这是代码:
export class RouteBreadcrumbsComponent {
breadcrumbs = [];
constructor(
private router: Router,
) {
let buffer = [];
/*
Listen for router events in reverse order (to get all events).
From the snapshots, return its path and its breadcrumb.
*/
this.router.events.pipe(
filter(event => event instanceof ActivationEnd),
map((event: ActivationEnd) => [
event.snapshot.data && event.snapshot.data.crumb || undefined,
this.determineCorrectPath(event.snapshot),
]),
filter(([crumb, url]) => !!crumb),
).subscribe(([crumb, url]) => buffer.push({ crumb, url }));
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe(event => {
this.breadcrumbs = buffer.reverse();
buffer = [];
});
}
determineCorrectPath(snapshot: ActivatedRouteSnapshot) {
const path = snapshot.routeConfig.path;
const params = snapshot.params;
// Path = route with a param, so get the param
if (path.startsWith(':'))
return params[path.replace(':', '')];
// Path = '' = route group or root route of a lazy loaded module, so take the parent path
else if (!path)
return snapshot.parent.routeConfig.path;
// Path can be used as is
else
return path;
}
buildRoutingArray(crumbIndex: number) {
return this.breadcrumbs
.slice(0, crumbIndex + 1)
.map(crumb => crumb.url)
.join('/');
}
}
推荐阅读
- email - 同一共享主机上的任何人都可以使用我的域通过 SPF 和 DKIM 发送电子邮件吗?
- wso2 - WSO2:从传入的 IBM MQ 消息中获取 MQRFH2 标头
- python - 关于在 Bokeh 中矢量化颜色的问题
- mysql - 使用 .Net Core Web Api 中的数据从 MySQL DB 生成 SQLite DB
- javascript - Google Chrome 扩展程序中的 Microsoft Translate API 错误 405000
- php - CSRF 保护 Codeigniter
- python - 在 Plotly Python 中对数据进行排序和排序
- r - R绘制具有平滑效果的图形
- swift - 云功能发布请求未正确向 IOS 应用程序发送错误消息
- tinymce - TinyMCE 5 在空标签中添加空间