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

Posted 2023-03-15

【中文标题】ng-material-multilevel-menu 在 Angular 7 中不起作用

【英文标题】：ng-material-multilevel-menu not working in Angular 7

【发布时间】：2019-06-10 21:06:50

【问题描述】：

我将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));
  

【参考方案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

【讨论】：

4.9.2 版本警告仍然存在

npm WARN ng-material-multilevel-menu@4.9.2 需要 @angular/common@^6.0.0-rc.0 的同级 || ^6.0.0 但没有安装。您必须自己安装对等依赖项。 npm WARN ng-material-multilevel-menu@4.9.2 需要@angular/core@^6.0.0-rc.0 || ^6.0.0 但没有安装。您必须自己安装对等依赖项。

@Shanky - 请检查我的问题***.com/questions/60336154/…