Angular 用材料设计为面包屑涂底漆'；s选项卡-面包屑跟随最后一个选项卡组件

我试图使用教程将Priming的面包屑（）和Material Design的选项卡（）结合起来。虽然有一些拼写错误，但我想我基本上都能做到

我有一组标签嵌套在另一组标签中（我知道通常是no-no，但说来话长）。理想情况下，如果他们单击第一级的第二个选项卡，然后单击第二级的第二个选项卡，那么所需的结果将类似于“家具>桌子”，并显示桌子组件

现在，面包屑总是指向第一个第一级选项卡的最后一个第二级组件。例如：

家具|工具|油漆 桌子|椅子|桌子|床

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

任何关于我错在哪里的指点都将不胜感激

我的代码：

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 { 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");
  }

}

---

单击选项卡时出现任何错误？你还可以创建一个plunker吗？没有错误，这是一个好主意。给我一分钟整理一下。事实上，plunker没有材料设计库，所以我不能在plunker中复制它。对不起，不能。工作电脑。谢谢你！当你点击该选项卡时，是否会出现任何错误？你还可以创建一个plunker吗？没有错误，这是一个好主意。给我一分钟整理一下。事实上，plunker没有材料设计库，所以我不能在plunker中复制它。对不起，不能。工作电脑。谢谢你！使用此选项进行材质填充

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

}