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

时间:2017-09-25 11:09:50

标签: angular angular-material2

随着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?

2 个答案:

答案 0 :(得分:6)

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

  

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

链接到working demo

答案 1 :(得分:0)

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