我已经完成了一个应用程序,并且在我的应用程序中使用了面包屑。
我的代码是这样的:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { BreadCrumb } from './breadcrumb';
import { map, filter} from 'rxjs/operators';
@Component({
selector: 'app-breadcrumb',
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.css'],
encapsulation: ViewEncapsulation.None
})
export class BreadcrumbComponent implements OnInit {
breadcrumbs$ = this.router.events
.filter((event) => event instanceof NavigationEnd)
.distinctUntilChanged()
.map(event => this.buildBreadCrumb(this.activatedRoute.root));
// Build your breadcrumb starting with the root route of your current activated route
constructor(private activatedRoute: ActivatedRoute,
private router: Router) {
}
ngOnInit() {
}
buildBreadCrumb(route: ActivatedRoute, url: string = '',
breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
// If no routeConfig is avalailable we are on the root path
const label = route.routeConfig ? route.routeConfig.data[ 'breadcrumb' ] : 'Home';
const path = route.routeConfig ? route.routeConfig.path : '';
// In the routeConfig the complete path is not available,
// so we rebuild it each time
const nextUrl = `${url}${path}/`;
const breadcrumb = {
label: label,
url: nextUrl
};
const newBreadcrumbs = [ ...breadcrumbs, breadcrumb ];
if (route.firstChild) {
// If we are not on our current path yet,
// there will be more children to look after, to build our breadcumb
return this.buildBreadCrumb(route.firstChild, nextUrl, newBreadcrumbs);
}
return newBreadcrumbs;
}
}
BreadCrumbs HTML 是这样的:
<ol class="breadcrumb">
<li *ngFor="let breadcrumb of breadcrumbs$ | async"
class="breadcrumb-item">
<a [routerLink]="[breadcrumb.url, breadcrumb.params]">
{{ breadcrumb.label }}
</a>
</li>
</ol>
如果我编译它然后它显示这个错误:
ERROR in src/app/share/components/breadcrumb/breadcrumb.component.ts(20,4): error TS2339: Property 'filter' does not exist on type 'Observable<Event>'.
我试了很多次,谷歌搜索都没有找到解决办法。任何人都可以帮助我并告诉我哪里错了吗?
最佳答案
使用管道运算符
breadcrumbs$ = this.router.events.pipe(
filter((event) => event instanceof NavigationEnd),
distinctUntilChanged(),
map(event => this.buildBreadCrumb(this.activatedRoute.root))
);
关于javascript - 带有面包屑的 Angular 6 过滤器显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50869354/