随着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?
答案 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 ]