代码之家 › 专栏 › 技术社区 › Rohit Azad Malik

带面包屑的角6滤波器显示错误

angular6 rxjs angular javascript

1

Rohit Azad Malik · 技术社区 · 7 年前

我做了一个应用程序,我在我的应用程序中使用了breadcrumb。

我的代码是这样的:

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;
    }

}

面包屑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>'.

我试过很多次,搜索过谷歌,但没有找到解决方案。有谁能帮我告诉我哪里错了吗?

1 回复 | 直到 7 年前

1

2

Sachila Ranawaka 7 年前

使用pipable运算符

  breadcrumbs$ = this.router.events.pipe(
         filter((event) => event instanceof NavigationEnd),
         distinctUntilChanged(),
         map(event => this.buildBreadCrumb(this.activatedRoute.root))
  );

Doc