angular-material-多级菜单 Angular 6？

Question

我已经尝试实现多级 sidenav，我发现这个符合我的要求：

angular-material-multilevel-menu

Demo - 注意手风琴类型

不幸的是，这是为 AngularJS (1.0?) 创建的，它似乎在 Angular 6.

中不起作用

我的问题是：

Angular6 是否还有其他多级 sidenav 组件？注意到在 Google 上发现了任何类似的东西。
是否可以 "upgrade" 这个 Angular 1.0 菜单到 Angular 6？怎么样？
是否有任何简单的说明或课程来构建您自己的多级侧边导航？一级的说明很多，但是我发现了none多级。

Answer 1

Angular Material 6.0 没有开箱即用的多级菜单。您必须自己创建它。它将是 Nested Menu, and Side Nav 的组合。

为了回答您的第一个问题，我建议您看一下 PrimeNG's Panel Menu。它完全可以满足您的需求，只需稍加努力，您还可以将其设计更改为 Material 之类的。（我用一些 PrimeNG 组件做到了，所以我可以确认它有效。

Please take in consideration that PrimeNG 6.0.0 is currently in Alpha-2 version.

Answer 2

我找到了部分解决方案。

Here is a demo using "mat-expansion-panel"

还有一些问题需要解决

Expansion Level 的阴影和偏移量
关闭而不是保持选中状态
更好的方法？

有什么建议吗？

Answer 3

我不知道你是否还在寻找 angular-material-multilevel-menu，但我找到了一个由 ShankyTiwari 制作的菜单。这是 GitHub and the link for the demo 的 link。

非常易于使用和实施。例如，我在边栏中实现了它，因为它不存在 Angular material。如果不是另一种选择，就像@Dino 所说的那样。

Answer 4

我想用原生 angular material 创建多级菜单，但 ng material 团队仍在开发中。所以，我建议现在按照以下步骤使用 ng-material-multilevel-menu 包：

npm install --save ng-material-multilevel-menu 或 yarn add --save ng-material-multilevel-menu
然后通过

NgMaterialMultilevelMenuModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
/* Import the module*/
import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
 
import { AppComponent } from './app.component';
 
@NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule,
    NgMaterialMultilevelMenuModule // Import here
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

在你的 html 中调用 <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu>。
最后，为您的列表项和 config 对象声明 appitems

appitems = [
    {
        label: 'NPM',
        icon: 'favorite',
        link: 'https://www.npmjs.com/package/ng-material-multilevel-menu',
        externalRedirect: true
    },
    {
        label: 'Item 1 (with Font awesome icon)',
        faIcon: 'fab fa-500px',
        items: [
            {
                label: 'Item 1.1',
                link: '/item-1-1',
                faIcon: 'fab fa-accusoft'
            },
            {
                label: 'Item 1.2',
                faIcon: 'fab fa-accessible-icon',
                items: [
                    {
                        label: 'Item 1.2.1',
                        link: '/item-1-2-1',
                        faIcon: 'fas fa-allergies'
                    },
                    {
                        label: 'Item 1.2.2',
                        faIcon: 'fas fa-ambulance',
                        items: [
                            {
                                label: 'Item 1.2.2.1',
                                link: 'item-1-2-2-1',
                                faIcon: 'fas fa-anchor',
                                onSelected: function() {
                                    console.log('Item 1.2.2.1');
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        label: 'Item 2',
        icon: 'alarm',
        items: [
        {
            label: 'Item 2.1',
            link: '/item-2-1',
            icon: 'favorite'
        },
        {
            label: 'Item 2.2',
            link: '/item-2-2',
            icon: 'favorite_border'
        }
        ]
    },
    {
        label: 'Item 3',
        link: '/item-3',
        icon: 'offline_pin',
        onSelected: function() {
            console.log('Item 3');
        }
    },
    {
        label: 'Item 4',
        link: '/item-4',
        icon: 'star_rate',
        hidden: true
    }
];

  config = {
    paddingAtStart: false,
    classname: 'my-custom-class',
    listBackgroundColor: '#fafafa',
    fontColor: 'rgb(8, 54, 71)',
    backgroundColor: '#fff',
    selectedListFontColor: 'red',
    interfaceWithRoute: true
  };

注意：如果 link 属性可用，interfaceWithRoute 将使根项目 link 可用。

angular-material-多级菜单 Angular 6？

An angular-material-multilevel-menu for Angular 6?

angular6

sidenav