Angular 6的角度材料多级菜单？

Question

我尝试实现多级侧导航，发现这符合我的要求：

angular-material-multilevel-menu

Demo - 注意手风琴类型

不幸的是，这是为 AngularJS（1.0？）创建的，这在 Angular 6 中似乎不起作用。

我的问题是：

1. Angular 6 还有其他多级侧导航组件吗？请注意在 Google 上找到任何类似的有效方法。
2. 是否可以将此 Angular 1.0 菜单“升级”到 Angular 6？怎么样？
3. 是否有任何简单的说明或课程来构建您自己的多级侧导航？一级的说明很多，但我没有找到多级的。

Answer 1

我不知道您是否还在寻找 angular-material-multilevel-menu，但我找到了 ShankyTiwari 制作的一个。 这是GitHub 的链接和demo 的链接。

非常易于使用和实施。例如，我在侧边栏中实现了它，因为它不存在于 Angular 材料中。 如@Dino 所说，如果不是替代方案，那就是 PrimeNG。

Answer 2

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

为了回答您的第一个问题，我建议您查看PrimeNG's Panel Menu。它完全符合您的需求，并且只需稍加努力，您还可以将其设计更改为类似 Material 的内容。 （我是用一些 PrimeNG 组件做的，所以我可以确认它可以工作。

请注意 PrimeNG 6.0.0 目前在 Alpha-2 version.

Answer 3

我找到了解决方案的一部分。

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

还有一些问题需要解决。

1. 扩展关卡的阴影和偏移
2. 关闭而不是保持选中状态
3. 更好的方法？

有什么建议吗？

Answer 4

我希望使用原生 Angular 材质创建多级菜单，但 ng 材质团队仍在开发中。所以，我想建议现在使用ng-material-multilevel-menu 包，如下所示：

1. npm install --save ng-material-multilevel-menu 或 yarn add --save ng-material-multilevel-menu
2. 然后通过
导入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 { }

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

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
  };

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