ng-material-multilevel-menu 在 Angular 7 中不起作用

Question

我将this plugin 用于 Angular 7 上的多级菜单。它在执行 ng serve 时工作正常，但在执行 ng build 时不起作用。
使用 'ng build --configuration=dev' 构建时出现此错误。

ERROR in src\app\sidemenu\sidemenu.component.html(8,76): : Property 'selectedItem' does not exist on type 'SidemenuComponent'.
src\app\sidemenu\sidemenu.component.html(8,114): : Property 'selectedLabel' does not exist on type 'SidemenuComponent'.

在执行“npm install”时也会收到以下警告。

npm WARN ng-material-multilevel-menu@4.9.1 requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-material-multilevel-menu@4.9.1 requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

这是我在 angular.json 中的开发配置

"dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }

这里是sidemenu.component.html

<mat-nav-list style="padding-top:0px !important;">
    <a mat-list-item (click)="toggleText()">
      <i *ngIf=!showText class="material-icons" aria-label="Show icon only">chevron_right</i>
      <i *ngIf=showText class="material-icons" aria-label="Show icon and text">chevron_left</i>
    </a>
  </mat-nav-list>

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

这里是 ts 文件。请指教我做错了什么。

import { Component, OnInit } from '@angular/core';
import { ElementRef } from '@angular/core';

@Component({
  selector: 'app-sidemenu',
  templateUrl: './sidemenu.component.html',
  styleUrls: ['./sidemenu.component.css'],
})
export class SidemenuComponent implements OnInit {
  showText = true;
  appitems: any[];
  config: any;
  constructor(private el: ElementRef) {}
  ngOnInit() {
    this.appitems = [
      {
        label: 'Dashboard',
        icon: 'dashboard',
        link: 'dashboard',
      },
      {
        label: 'Create Order',
        icon: 'shopping_cart',
        link: 'order',
      },
      {
        label: 'Search',
        icon: 'image_search',
        items: [
          {
            label: 'Order Search',
            icon: 'search',
            link: 'order-search',
          },
          {
            label: 'Job Search',
            icon: 'search',
            link: 'job-search',
          },         
        ],
      },

    ];
    this.config = {
      interfaceWithRoute: true,
      classname: 'side-menu-class',
      listBackgroundColor: `#12517c`,
      fontColor: `white`,
      backgroundColor: `#12517c`,
      selectedListFontColor: `red`,
    };
  }
  toggleText() {
    this.showText = !this.showText;
    const elements = this.el.nativeElement.querySelectorAll('.label');
    const htmlElements = Array.from(elements).map(x => x as HTMLElement);
    htmlElements.forEach(label => (label.hidden = !this.showText));
  }
}

Answer 1

以下警告与您的项目及其插件问题无关。该插件需要使用其依赖项进行更新。我会尽快做的。

npm WARN ng-material-multilevel-menu@4.9.1 requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-material-multilevel-menu@4.9.1 requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

就上述错误而言，SideMenu Component 类中没有定义selectedItem() 和selectedLabel() 方法。

谢谢，

编辑 1：

You have to install Peer dependencies by yourself