Невозможно связать с «конфигурацией», так как это не известное свойство «ng-material-multilevel-menu»

Question

Я использую плагин ng-material-multilevel-menu для создания многоуровневого выпадающего меню. Я следую этой статье, но получаю ниже ошибки времени выполнения

Невозможно привязать к 'конфигурации', так как она не известна свойству 'ng-material-multilevel- меню'. 1. Если 'configuration' - это директива Angular, то добавьте 'CommonModule' в '@ NgModule.imports' этого компонента. 2. Чтобы разрешить любое свойство, добавьте «NO_ERRORS_SCHEMA» к «@ NgModule.schemas» этого компонента.

Невозможно связать с «items», поскольку оно не является известным свойством «ng-material- многоуровневое меню. 1. Если 'items' - это директива Angular, то добавьте 'CommonModule' к '@ NgModule.imports' этого компонента. 2. Чтобы разрешить любое свойство, добавьте 'NO_ERRORS_SCHEMA' к '@ NgModule.schemas' этого компонента.

'ng-material-multilevel-menu' не является известным элементом: 1. Если 'ng-material -multilevel-menu 'является компонентом Angular, затем убедитесь, что он является частью этого модуля. 2. Если 'ng-material-multilevel-menu' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' в '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.

Это мой код в .html файле

 <div>
  <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)">
  </ng-material-multilevel-menu>
 </div>

Это мой код в .ts файле

import { Component, OnInit, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
import { AppComponent } from '../app.component';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    NgMaterialMultilevelMenuModule // Import here
  ],
  providers: [],
  bootstrap: [AppComponent]
})


export class ProductsComponent implements OnInit {

  constructor(private employeeService: ProductService) {
  }

  ngOnInit() {

     var appitems = [
        {
          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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

Как мне решить эту проблему?

Answer 1

Удалить секцию @NgModule из этого файла компонента. Добавьте NgMaterialMultilevelMenuModule в раздел импорта вашего app.module.ts файла.

И объявите appitems как глобальную переменную над конструктором, как показано ниже:

export class ProductsComponent implements OnInit {

  appitems: any = [];
  constructor(private employeeService: ProductService) {
  }

  ngOnInit() {

     this.appitems = [
        {
          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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

Answer 2

Во-первых: не используйте var, просто используйте его следующим образом appitems = [...] Во-вторых: вы не объявили переменную config в вашем контроллере. Третье: вам нужно добавить NgMaterialMultilevelMenuModule в класс AppModule, а не в созданный вами компонент.

Answer 3

Просто определите конфигурацию в вашем ProductsComponent:

config = {
    paddingAtStart: true,
    interfaceWithRoute: true,
    classname: 'my-custom-class',
    listBackgroundColor: `rgb(208, 241, 239)`,
    fontColor: `rgb(8, 54, 71)`,
    backgroundColor: `rgb(208, 241, 239)`,
    selectedListFontColor: `red`,
    highlightOnSelect: true,
    collapseOnSelect: true,
    rtlLayout: false
};