Javascript 带面包屑的角度6过滤器显示错误
我做了一个应用程序,我在应用程序中使用了面包屑 我的代码如下:Javascript 带面包屑的角度6过滤器显示错误,javascript,angular,rxjs,angular6,Javascript,Angular,Rxjs,Angular6,我做了一个应用程序,我在应用程序中使用了面包屑 我的代码如下: import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { BreadCrumb } from './breadcrumb'; import { map, filter} from '
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;
}
}
从'@angular/core'导入{Component,OnInit,viewenclosuration};
从'@angular/Router'导入{ActivatedRoute,NavigationEnd,Router};
从“/BreadCrumb”导入{BreadCrumb};
从“rxjs/operators”导入{map,filter};
@组成部分({
选择器:“应用程序面包屑”,
templateUrl:“./breadcrumb.component.html”,
样式URL:['./breadcrumb.component.css'],
封装:视图封装。无
})
导出类BreadcrumbComponent实现OnInit{
breadcrumbs$=this.router.events
.filter((事件)=>NavigationEnd的事件实例)
.distinctUntilChanged()
.map(event=>this.buildBreadCrumb(this.activatedRoute.root));
//从当前激活路径的根路径开始构建面包屑
构造函数(私有activatedRoute:activatedRoute,
专用路由器(路由器){
}
恩戈尼尼特(){
}
buildBreadCrumb(路由:ActivatedRoute,url:string='',
面包屑:数组=[]):数组{
//如果没有可用的routeConfig,则我们位于根路径上
const label=route.routeConfig?route.routeConfig.data['breadcrumb']:'Home';
const path=route.routeConfig?route.routeConfig.path:“”;
//在routeConfig中,完整路径不可用,
//所以我们每次都重建它
const nextUrl=`${url}${path}/`;
常量面包屑={
标签:标签,
网址:nextUrl
};
常量newBreadcrumbs=[…面包屑,面包屑];
if(路线第一个孩子){
//如果我们还没有走上当前的道路,
//将会有更多的孩子需要照顾,建造我们的面包园
返回此.buildBreadCrumb(route.firstChild、nextur、newBreadcrumbs);
}
归还面包屑;
}
}
面包屑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>
{{breadcrumb.label}
如果我编译它,那么它会显示以下错误:
ERROR in src/app/share/components/breadcrumb/breadcrumb.component.ts(20,4): error TS2339: Property 'filter' does not exist on type 'Observable<Event>'.
src/app/share/components/breadcrumb/breadcrumb.component.ts(20,4)中出现错误:错误TS2339:类型“Observable”上不存在属性“filter”。
我尝试过很多次,搜索过谷歌,但没有找到解决方案。谁能帮我一下,告诉我哪里错了吗?使用pipable操作符
breadcrumbs$ = this.router.events.pipe(
filter((event) => event instanceof NavigationEnd),
distinctUntilChanged(),
map(event => this.buildBreadCrumb(this.activatedRoute.root))
);
如何在其他组件中使用此功能?如何在其他组件中使用此功能?