Question

你好，世界，我有一个sidenav，基本上可以使用制表符，只是我想要在过渡中实现的效果。但是，现在我想通过单击“选项1，选项2或选项3”从选项卡进行此转换，但是现在出现的两个选项是带有5个选项和2个选项的下拉菜单（打开时（下拉菜单），但我找不到实现它的方法。有谁知道从哪里开始或类似的东西？

这是我的代码： https://stackblitz.com/edit/angular-x5xefi-xbxn4i

Answer 1

编辑2018年12月19日

有关模拟期望行为（如here）的解决方案，请参见最新的堆栈闪电this。

2018年12月18日

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

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呈现为正常。

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

1 个答案: