时间戳

首页 > 解决方案 > Angular 5 Material 如何将下拉菜单添加到多级轮播样式的 SideNav？

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

问题描述

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

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

标签： angulartypescriptangular-materialangular5components

解决方案

编辑 19.12.2018

请参阅此处的最新 stackblitz以获取模拟此类所需行为的解决方案。

18.12.2018

我不确定我是否完全理解您想要实现的目标，但这是我整理的一个快速而肮脏的堆栈闪电战。显然，您必须对下拉菜单/选项进行一些样式设置，以使其看起来更自然并与您的其他样式一致。

改变在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-itema元素。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渲染为正常。

推荐阅读