Angular 5 Material如何将下拉菜单添加到多层Carousel样式SideNav？

编辑19.12.2018

请参阅最新的stackblitz这里一个解决方案，模拟所需的类似行为这样。

2018年12月18日

我不确定我确切地了解您想要实现什么，但是这是我整理的快速而肮脏的堆叠闪电战。显然，您必须对下拉菜单/选项进行一些样式设置，以使其看起来更加自然并与其他样式保持一致。

改变在 tab-group-basic-example.ts

{
  id: 2, // 1st level
  options: [
    { 
      option: 'Dropdown with 5 options', 
      route: '/Submenu1', 
      options: [
        { label: "Option 1", route: "/Submenu1" },
        { label: "Option 2", route: "/Submenu2" },
        { label: "Option 3", route: "/Submenu3" },
        { label: "Option 4", route: "/Submenu4" },
        { label: "Option 5", route: "/Submenu5" },
      ]        
    },
    // { option: 'TestJustIgnore', route: '/Submenu2' },
    // { option: 'TestJustIgnore', route: '/Submenu3' },
    { 
      option: 'Dropdown with 2 options', 
      route: '/Submenu4', 
      options: [
        { label: "Option 1", route: "/Submenu1" },
        { label: "Option 2", route: "/Submenu2" }
      ]  
    },
    // { option: 'TestJustIgnore', route: '/Submenu5' },
  ]
}

我添加了一个options属性，其中包含用于下拉菜单的选项数组，带有文本标签（作为选项显示）以及应该导航到的路线。当该属性被设置，而不是一个mat-list-item一个mat-select元件将与所定义的选项中呈现。

的变化 tab-group-basic-example.html

<a mat-list-item *ngIf="!rootOption.rootTab && !rootOption.options"
                 [routerLink]="rootOption.route" 
                 routerLinkActive="active">
  {{rootOption.option}}
</a>

<mat-select *ngIf="rootOption.options"                        
             placeholder="Select an Option">
  <mat-option *ngFor="let option of rootOption.options"
              [routerLink]="option.route" 
              [value]="option.label">
    {{option.label}}
  </mat-option>
</mat-select>

基本上，它检查是否options定义了上述内容，如果是，则将mat-select使用提供的选项来渲染元素，如果没有，则将正常mat-list-item显示为正常。