我正在将此插件用于 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));
}
}