Angular 5 Material 如何将下拉菜单添加到多级轮播样式的 SideNav？

Posted 2023-02-23

【中文标题】Angular 5 Material 如何将下拉菜单添加到多级轮播样式的 SideNav？

【英文标题】：Angular 5 Material How to add Dropdowns to a Multi-level Carousel style SideNav?

【发布时间】：2019-05-17 21:51:49

【问题描述】：

Hello World，我有一个基本上与选项卡一起使用的 sidenav，这正是我想要在过渡中实现的效果。但是现在我想通过单击“选项 1、选项 2 或选项 3”从选项卡中进行此转换来添加它，但是现在会出现的两个选项是带有 5 个选项和 2 个选项的下拉菜单（当打开下拉）但我找不到实现它的方法。有没有人知道从哪里开始或类似的事情？

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

【参考方案1】：

编辑 19.12.2018

请参阅最新的 stackblitz here 以了解模拟所需行为的解决方案，例如 this。

18.12.2018

我不确定我是否完全理解您想要实现的目标，但这是我整理的快速而肮脏的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-select 元素，而不是 mat-list-item。

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

【讨论】：

您好，非常感谢您的回复，非常感谢。这几乎是我想要做的，而且我做到了，但我不能做的是在同一个侧边栏中看到它，而不是作为单独的菜单。我想要的是下拉菜单在同一个侧边栏中，如下例所示：link

我仍然找不到解决方案，我尝试了一些我在网上找到的东西，但没有任何效果。我会继续努力，如果有人知道我该怎么做，请告诉我。

如果你尝试用mat-accordion 和mat-expansion-panel 来构建它，比如here？显然需要对其进行样式设置，但行为类似于您发布的示例。

添加了一些最小的样式，以便更好地融入菜单stackblitz

天哪，谢谢！这对我来说很完美，正是我需要的。我的最后一个问题：是否可以从 Typescript 添加一些图标（用于这些导航选项）？我通常直接在 HTML 中添加垫子图标，但在这种情况下；我可以用 TypeScript 来做吗？真的很感激。