无法绑定到“配置”，因为它不是“ng-material-multilevel-menu”的已知属性

Question

我正在使用ng-material-multilevel-menu插件来创建多级下拉菜单。 我正在关注这篇文章，但低于运行时错误

无法绑定到“配置”，因为它不是“ng-material-multilevel-menu”的已知属性。 1.如果'configuration'是一个Angular指令，那么在这个组件的'@NgModule.imports'中添加'CommonModule'。 2.要允许任何属性添加'NO_ERRORS_SCHEMA'到这个组件的'@NgModule.schemas'。

无法绑定到“项目”，因为它不是“ng-material-multilevel-menu”的已知属性。 1.如果'items'是一个Angular指令，那么在这个组件的'@NgModule.imports'中添加'CommonModule'。 2.要允许任何属性添加'NO_ERRORS_SCHEMA'到这个组件的'@NgModule.schemas'。

'ng-material-multilevel-menu' 不是已知元素： 1. 如果 'ng-material-multilevel-menu' 是一个 Angular 组件，则验证它是否是该模块的一部分。 2. 如果'ng-material-multilevel-menu' 是一个Web 组件，则将'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部分。 在app.module.ts文件的导入部分添加NgMaterialMultilevelMenuModule 。

并将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 变量。 第三：您需要在 AppModule 类中而不是在您创建的组件中添加 NgMaterialMultilevelMenuModule。

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