使用Material Design的标签进行PrimeNG面包屑 - 面包屑遵循最后一个标签组件

Question

我尝试使用Here教程将PrimeNG的面包屑（Here）和Material Design的标签（this）结合起来。其中有一些拼写错误，但我认为我大部分时间都在运作。

我有一组标签嵌套在另一组内（我知道通常是禁止，但这是一个很长的故事）。理想情况下，如果他们点击第一级的第二个标签，然后点击第二级的第二个标签，则所需的结果将类似于＆＃34;家具＆gt;桌子＆＃34;显示表组件。

现在，Breadcrumb始终指向第一个第一级选项卡的最后一个第二级组件。例如：

家具|工具|油漆

表|椅子|书桌|床

在这种情况下，面包屑将始终指向家具＆gt;床。 如果我切换代码来放桌子，它总是指向桌子。就像当我点击选项卡时，服务没有被触发。

任何有关我出错的地方都会受到赞赏。

我的代码：

Service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { MenuItem } from 'primeng/primeng';

@Injectable()
export class BreadcrumbService {

    public breadcrumbItem: BehaviorSubject<MenuItem[]> = new BehaviorSubject<MenuItem[]>([]);
    private itemBreadcrumbs: MenuItem[];

  constructor() { }

      setBreadcrumbs(page: string) {
        this.itemBreadcrumbs = [];
        let refList: MenuItem[] = this.getBreadcrumbsLink(page);
        this.breadcrumbItem.next(refList);
    }

    private getBreadcrumbsLink(page: string): MenuItem[] {
        this.itemBreadcrumbs = [];

        switch (page) {
            case 'home':
                this.itemBreadcrumbs.push({ label: '' });
                break;
            case 'tables':
                this.itemBreadcrumbs.push({ label: 'Furniture' });
                this.itemBreadcrumbs.push({ label: 'Tables' });
                break;
            case 'chairs':
                this.itemBreadcrumbs.push({ label: 'Furniture' });
                this.itemBreadcrumbs.push({ label: 'Coating' });
                break;
            case 'desks':
                this.itemBreadcrumbs.push({ label: 'Furniture' });
                this.itemBreadcrumbs.push({ label: 'Desks' });
                break;
            case 'beds':
                this.itemBreadcrumbs.push({ label: 'Furniture' });
                this.itemBreadcrumbs.push({ label: 'Beds' });
                break;
            default:
                this.itemBreadcrumbs = [];
        }
        return this.itemBreadcrumbs;    

     }

}

主页

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/primeng';
import { BreadcrumbService} from '../services/breadcrumb.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class homeComponent implements OnInit {

  objBreadcrumbs: MenuItem[];

    constructor(
        private breadcrumbService: BreadcrumbService) {
        this.objBreadcrumbs = [];
    }

  ngOnInit() {
        this.breadcrumbService.breadcrumbItem.subscribe((val: MenuItem[]) => {
            if (val)
                this.objBreadcrumbs = val;
        });
  }

}

表

import { Component, OnInit } from '@angular/core';
import { BreadcrumbService} from '../services/breadcrumb.service';

@Component({
  selector: 'app-tables',
  templateUrl: './tables.component.html',
  styleUrls: ['./tables.component.css'],
})

export class tablesComponent implements OnInit{


  constructor(
      private breadcrumbService: BreadcrumbService
    ) {
  }

    onSelect(event) {
    console.log(event);
  }

  ngOnInit() {
    this.breadcrumbService.setBreadcrumbs("tables");
  }

}