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

Question

我试图实现一个多级sidenav，我发现这符合我的要求：

角度材料多级菜单

演示- 注意手风琴类型

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

我的问题是：

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

Answer 1

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

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

Answer 2

我正在寻找使用原生角度材料创建多级菜单，但仍在由 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 { }

3. 调用<ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu>你的html。
4. 最后，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 如果链接属性可用，将使根项目可链接。

Answer 3

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

这是一个使用“mat-expansion-panel”的演示

还有一些问题需要解决。

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

有什么建议么？

Answer 4

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

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

请注意 PrimeNG 6.0.0 目前是 Alpha-2 版本。