Angular 5 Material Многоуровневое меню SideNav в стиле карусели (без раскрывающегося списка)

Изучив это подробнее, я почувствовал, что исходное решение было явно сложным, и должен был быть лучший способ.

• Первоначальный подход заключался в том, чтобы управлять иерархией в основном из представления...
• Это был неправильный подход.

Пересмотренный подход основан на концепции управления представлением на основе иерархии массивов... это обеспечивает гораздо более чистое решение с лучшей масштабируемостью.

Определить иерархию массива... ключом здесь является назначение параметров с подменю rootTab индексам, которые будут содержать параметры подменю при нажатии.

rootTabs = [
    {
      id: 0,
      options: [
        { option: 'Home' },
        { option: 'Parámetros' },
        { option: 'Operativa' },
        { option: 'Productos' },
        { option: 'Invocación Servicios', rootTab: 1 }
      ]
    },
    {
      id: 1,
      options: [
        { option: 'Portal 1', rootTab: 2 },
        { option: 'Portal 2', rootTab: 4 },
        { option: 'Portal 3', rootTab: 5 }
      ]
    },
    {
      id: 2,
      options: [
        { option: 'Service 1 Item1', route: '/Submenu1' },
        { option: 'Service 1 Item2', route: '/Submenu2' },
        { option: 'Service 1 Item3', route: '/Submenu3' },
        { option: 'Service 1 Item4', route: '/Submenu4' },
        { option: 'Service 1 Item5', route: '/Submenu5' },
        { option: 'Invocación Servicios', rootTab: 3 }
      ]
    },
    {
      id: 3, options: [
        { option: 'put additional options here' }
      ]
    },
    {
      id: 4,
      options: [
        { option: 'Service 2 Item1', route: '/Submenu1' },
        { option: 'Service 2 Item2', route: '/Submenu2' },
        { option: 'Service 2 Item3', route: '/Submenu3' },
        { option: 'Service 2 Item4', route: '/Submenu4' },
        { option: 'Service 2 Item5', route: '/Submenu5' },
      ]
    },
    {
      id: 5,
      options: [
        { option: 'Service 3 Item1', route: '/Submenu1' },
        { option: 'Service 3 Item2', route: '/Submenu2' },
        { option: 'Service 3 Item3', route: '/Submenu3' },
        { option: 'Service 3 Item4', route: '/Submenu4' },
        { option: 'Service 3 Item5', route: '/Submenu5' },
      ]
    }
  ]

Создайте методы компонентов для обработки состояния меню посредством взаимодействия с пользовательским интерфейсом.

rootSelected(optionIndex, optionRootIndex, rootOption) {
    this.numItemsSelected++;
    this.previousRootTab = this.currentSelectedRootTab;
    this.currentSelectedRootTab = optionRootIndex;
    this.indexClicked = optionIndex;
    if (!this.breadcrumb1) {
      this.breadcrumb1 = rootOption
    } else if (!this.breadcrumb2) {
      this.breadcrumb2 = rootOption
    } else {
      this.breadcrumb3 = rootOption
    }
  }

  back2Main() {
    this.currentSelectedRootTab = 0;
    this.previousRootTab = 0;
    this.indexClicked = 0;

    this.numItemsSelected = 0;
    this.breadcrumb1 = null;
    this.breadcrumb2 = null;
    this.breadcrumb3 = null;
  }

  toBreadcrum1() {
    if (this.numItemsSelected > 1) {
      this.currentSelectedRootTab = this.breadcrumb1.rootTab;
      this.breadcrumb2 = null;
      this.numItemsSelected--
    }
  }

  toBreadcrum2() {
    if (this.numItemsSelected > 2) {
      this.currentSelectedRootTab = this.breadcrumb2.rootTab;
      this.breadcrumb3 = null;
      this.numItemsSelected--
    }
  }

Подключите все это в шаблоне

<div style="display: flex;flex-direction: row;margin:1% ;height:30px;">
    <div routerLink="/" routerLinkActive="active" (click)="back2Main()" style="cursor:pointer" class="vertical-align-text">Main</div>
    <div *ngIf="numItemsSelected >= 1">&nbsp;<mat-icon>chevron_right</mat-icon></div>
    <span *ngIf="numItemsSelected >= 1" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer;vertical-align: middle;" (click)="toBreadcrum1();">&nbsp;{{breadcrumb1.option}}</span>
    <div *ngIf="numItemsSelected >= 2">&nbsp;<mat-icon>chevron_right</mat-icon></div>
   <span *ngIf="numItemsSelected >= 2" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer" (click)="toBreadcrum2();">&nbsp;{{breadcrumb2.option}}</span>
    <div *ngIf="numItemsSelected >= 3">&nbsp;<mat-icon>chevron_right</mat-icon></div>
   <span *ngIf="numItemsSelected >= 3" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer" (click)="toBreadcrum3();">&nbsp;{{breadcrumb3.option}}</span>
   </div>


<div style="display: flex;flex-direction: row;background-color:white; height:100vh">
    <mat-tab-group class="navigation-tabs" [selectedIndex]="currentSelectedRootTab" dynamicHeight style="width:25vw; background-color:lightgray">
        <mat-tab *ngFor="let rootTab of rootTabs; let rootIndex = index" [label]="rootIndex">
            <mat-nav-list>
        <div *ngFor="let rootOption of rootTab.options; let optionIndex = index;">       
          <a mat-list-item *ngIf="!rootOption.rootTab" [routerLink]="rootOption.route" routerLinkActive="active">{{rootOption.option}}</a>
          <a mat-list-item style="width:100%" *ngIf="rootOption.rootTab" (click)="rootSelected(optionIndex, rootOption.rootTab, rootOption)">{{rootOption.option}}<div><mat-icon style="padding-left:20%;vertical-align: middle;">chevron_right</mat-icon></div></a>
        </div> 
            </mat-nav-list>
        </mat-tab>
    </mat-tab-group>
  <div style="margin:auto">
    <router-outlet></router-outlet> 
  </div>
</div>

Стэкблиц

https://stackblitz.com/edit/angular-x5xefi-gmzy46?embed=1&file=app/tab-group-basic-example.html