Question

我正在尝试在mat-menu应用中使用Angular。我遇到错误

没有将“ exportAs”设置为“ insertGMenu”（“插入” ]＃insertMenu =“ insertGMenu” xPosition =“ after” yPosition =“ below”>

这是component.html

<mat-toolbar color="secondary">
             <mat-toolbar-row>
                    <button mat-button [matMenuTriggerFor]="insertMenu">Insert</button>
                    <mat-menu #insertMenu="insertGMenu" xPosition="after" yPosition="below">
                      <button mat-menu-item>Portfolio</button>
                      <button mat-menu-item>Item 2</button>
                    </mat-menu>
              </mat-toolbar-row>
</mat-toolbar>

component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'gantt-toolbar',
    templateUrl: './ganttToolBar.component.html',
    styleUrls: ['./ganttToolBar.component.css']
  })


export class GanttToolBar{

    constructor(){

    }
}

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { GanttComponent } from './gantt/gantt.component';
import { GanttToolBar } from './gantt/ganttToolBar/ganttToolBar.component';
import { GanttPropertyService} from './services/gantt/ganttPropertyService';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule, MatButtonModule, MatMenuModule, MatIconModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    GanttComponent,
    GanttToolBar,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatMenuModule,
    MatToolbarModule, MatButtonModule, MatIconModule, BrowserAnimationsModule
  ],
  providers: [GanttPropertyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{ "name": "lp-scheduler-client", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~8.2.8", "@angular/cdk": "~8.2.1", "@angular/common": "~8.2.8", "@angular/compiler": "~8.2.8", "@angular/core": "~8.2.8", "@angular/forms": "~8.2.8", "@angular/material": "^8.2.1", "@angular/platform-browser": "~8.2.8", "@angular/platform-browser-dynamic": "~8.2.8", "@angular/router": "~8.2.8", "bootstrap": "^4.3.1", "dhtmlx-gantt": "file:scripts/thirdParty/dhtmlxGantt", "hammerjs": "^2.0.8", "jquery": "^3.4.1", "popper": "^1.0.1", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.803.6", "@angular/cli": "~8.3.6", "@angular/compiler-cli": "~8.2.8", "@angular/language-service": "~8.2.8", "@types/node": "~8.9.4", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.5.3" } }

我已经看过其他有关SO的问题，但是没有一个解决方案有效。

我尝试过的事情

-重新安装依赖项 -升级依赖 -导出MatMenuModule

Answer 1

您需要更改

<mat-menu #insertMenu="insertGMenu" xPosition="after" yPosition="below">

到

<mat-menu #insertMenu="matMenu" xPosition="after" yPosition="below">

在官方文档中，描述了选择器 mat-menu 被导出为 matMenu 您可以在这里https://material.angular.io/components/menu/api

进行检查

Angular 7无法导入垫菜单

1 个答案: