Question

随着Angular Material及其breaking changes的新更新，我无法再使用我的<md-menu>组件。我在导入MaterialModule时工作，但现在导入MatMenuModule或MdMenuModule时会产生以下错误：

compiler.es5.js:1690 Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "matMenu" ("
</mat-toolbar>
  <mat-menu xPosition="after" [ERROR ->]#wordListMenu="matMenu" 
): 
ng:///NavbarModule/NavbarComponent.html@38:28

我按照documentation上的指南和API，但语法似乎已经改变了？我已经尝试了#wordListMenu="matMenu"和#wordListMenu="mdMenu"，错误仍然存在。

我的html文件（相关部分）是：

<button mat-button [md-menu-trigger-for]="wordListMenu" [ngClass]="{'active' 
  : isActive(['/wordlist'])}">
  Word Lists
</button>
<mat-menu xPosition="after" #wordListMenu="matMenu" 
  [overlapTrigger]="false">
  //Content of menu
</mat-menu>

我的模块是：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {NavbarComponent} from 'app/navbar/navbar.component';
import { MdTooltipModule, MatMenuModule } from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    MdTooltipModule,
    MatMenuModule
  ],
  declarations: [NavbarComponent],
  exports: [NavbarComponent]
})
export class NavbarModule { }

我有什么遗失的吗？为什么编译器不识别matMenu？

Answer 1

问题在于您的角度版本。将角度版本更新为4.4.3或更高版本。材料2.0.0-beta.11取决于4.4.3或更高。来自CHANGELOG文档：

突破变化 Angular Material现在需要Angular 4.4.3或更高版本

链接到working demo。

Answer 2

如果要在html中添加matMenu，则需要在appmodule.ts中添加指令例如 从“ @ angular / material”导入{MatMenuModule}；进口：[ BrowserModule， MatMenuModule ]

模板解析错误：没有将“exportAs”设置为“matMenu”

2 个答案: