angular - Angular 5 Material 多级轮播样式 SideNav 菜单（无下拉菜单）

Question

我设法用 Angular Material 做到了这一点，它与使用下拉菜单部署的子菜单一起工作，但我正在寻找一种方法使它们不是“下拉菜单”，我正在寻找它们就像一种向右的过渡，像这样：

https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html#!/demo/views/item-2

但是这个是在 AngularJS 1.X 中完成的。我正在使用 Angular 5，有没有人想出任何方法或从哪里开始？谢谢！

Answer 1

在进一步研究之后，我觉得最初的解决方案过于复杂，必须有更好的方法。

• 最初的方法是主要从视图来控制层次结构......
• 这是错误的做法。

修改后的方法基于基于数组层次结构驱动视图的概念......这使得解决方案更加简洁，具有更好的可扩展性。

---

定义数组层次结构...这里的关键是将带有子菜单的选项分配给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' },
      ]
    }
  ]

创建组件方法以通过 UI 交互处理菜单状态。

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