Угловой материал-многоуровневое меню для Angular 6?

Question

Я попытался получить многоуровневый sidenav, и я обнаружил, что это соответствует моим требованиям:

angular-material-multilevel-menu

Demo - Обратите внимание на тип аккордеона

К сожалению, он создан для AngularJS (1.0?), Который, похоже, не работает в Angular 6.

Мои вопросы:

1. Есть ли какой-либо другой многоуровневый компонент sidenav для Angular 6?Имейте в виду, что в Google работает что-то похожее.
2. Возможно ли "обновить" это меню Angular 1.0 до Angular 6?Как?
3. Существуют ли простые инструкции или курсы для создания собственной многоуровневой боковой навигации?Существует много инструкций для одного уровня, но я не нашел ни одного многоуровневого.

Answer 1

Я искал создание многоуровневых меню с нативным угловым материалом, но он все еще находился в стадии разработки командой ng material.Итак, я хотел бы предложить сейчас использовать пакет 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 { }

Вызовите <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu> в своем html. Наконец, объявите appitems для элементов списка и config object

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 2

Я нашел ЧАСТЬ решения.

Вот демонстрация с использованием "mat-extension-panel"

Есть еще некоторые проблемы, которые необходимо решить.

1. тень и смещение уровня расширения
2. Выключение вместо того, чтобы оставаться выбранным
3. Лучший способ сделать это?

Есть предложения?

Answer 3

Я не знаю, ищите ли вы меню углового материала, многоуровневого, но я нашел одно, сделанное ShankyTiwari.Вот ссылка для GitHub и ссылка для demo .

. Очень прост в использовании и использовании.Например, я реализовал это в боковой панели, потому что он не существует с угловым материалом.Если бы не альтернатива, был бы PrimeNG, как сказал @Dino.

Answer 4

Angular Material 6.0 не поставляется с многоуровневым меню из коробки.Вы должны были бы создать это самостоятельно.Это будет комбинация Nested Menu и Side Nav .

И чтобы ответить на ваш первый вопрос, я бы посоветовал вам взглянуть на Меню панели PrimeNG .Он делает именно то, что вам нужно, и, приложив немного усилий, вы также сможете изменить его дизайн на материал типа.(Я сделал это с некоторыми компонентами PrimeNG, поэтому я могу подтвердить, что он работает.

Пожалуйста, примите во внимание, что PrimeNG 6.0.0 в настоящее время Альфа-2 версия .