Javascript 角形6面包屑不工作

我试图为我的平台创建一个面包屑组件。然而，这些标签没有显示出来，我很不明白为什么。如果你有任何内部，请随时提供帮助

面包屑成分：

    import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { BreadCrumb } from './breadcrumb';

@Component({
    selector: 'app-breadcrumb',
    templateUrl: './breadcrumb.component.html',
    styleUrls: [],
    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}；
@组成部分({
选择器：“应用程序面包屑”，
templateUrl:“./breadcrumb.component.html”，
样式URL:[]，
封装：视图封装。无
})
导出类BreadcrumbComponent实现OnInit{
breadcrumbs$=this.router.events
.filter（事件=>NavigationEnd的事件实例）
.distinctUntilChanged（）
.map（event=>this.buildBreadCrumb（this.activatedRoute.root））；
//从当前激活路径的根路径开始构建面包屑
构造函数（专用activatedRoute:activatedRoute，专用路由器：路由器）{
}
恩戈尼尼特（）{
}
buildBreadCrumb（路由：ActivatedRoute，url:string=''，breadcrumbs:Array=[]）：数组{
//如果没有可用的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}

对于过滤器，请使用管道

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