1

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

1 に答える 1