模板解析错误：没有 "exportAs" 设置为 "mdlButton" 的指令

Question

我正在使用 angular2-mdl 构建应用程序。一切正常，只是所有动画都不起作用。

查看以下 link 中提供的文档后，我注意到，例如，如果我想在单击按钮后切换特定菜单，我必须使用如下语法：

<button mdl-button #btn1="mdlButton" (click)="m1.toggle($event, btn1)" mdl-button-type="icon" mdl-ripple><mdl-icon>more_vert</mdl-icon></button>
<mdl-menu #m1="mdlMenu" mdl-menu-position="bottom-left">
   <mdl-menu-item mdl-ripple (click)="action()">Some Action</mdl-menu-item>
   <mdl-menu-item mdl-ripple mdl-menu-item-full-bleed-divider>Another Action</mdl-menu-item>
   <mdl-menu-item mdl-ripple disabled>Disabled Action</mdl-menu-item>
   <mdl-menu-item>Yet Another Action</mdl-menu-item>
</mdl-menu>

菜单的文档可用 here。

不幸的是，当我尝试使用以下代码复制相同的行为时：

button(mdl-button, mdl-button-type='icon', '#morebtn'="mdlButton" '(click)'="moremenu.toggle($event, morebtn)")
    mdl-icon more_vert
mdl-menu(mdl-menu-position='bottom-right', '#moremenu'="mdlMenu")
    mdl-menu-item About
    mdl-menu-item Contact
    mdl-menu-item Legal Information

编译为：

<button mdl-button="mdl-button" mdl-button-type="icon" #morebtn="mdlButton" (click)="moremenu.toggle($event, morebtn)">
    <mdl-icon>more_vert</mdl-icon>
</button>
<mdl-menu mdl-menu-position="bottom-right" #moremenu="mdlMenu">
    <mdl-menu-item>About</mdl-menu-item>
    <mdl-menu-item>Contact</mdl-menu-item>
    <mdl-menu-item>Legal Information</mdl-menu-item>
</mdl-menu>

我得到了标题中提到的错误。以下 pasted.co log.

处提供了完整的错误跟踪

我过去在 ngForm 使用 #f="ngForm" 时遇到过类似的问题，我通过在引发该错误的组件上导入 import { NgForm } from '@angular/forms'; 来解决。

所以我一直在挠头尝试导入 mdlButton 和 mdlMenu 就像

import { MdlButtonComponent } from '@angular-mdl/core/components/button/mdl-button.component';
import { MdlMenuComponent } from '@angular-mdl/core/components/menu/mdl-menu.component';

但错误仍然存在。

我有两个模块：

app.module.ts ：我在其中导入 MdlModule 以使其对整个应用程序可用
pages.module.ts ：我在页面中导入所有需要的组件

为什么我在按照文档进行操作时仍会收到此消息？我该如何解决这个问题？

Answer 1

来自一个模块的指令、组件和管道在另一个模块中使用时必须添加到使用它们的每个模块的导入 (@NgModule({ imports: [MdlModule], ...})) 中。
将它添加到 AppModule 的导入中并不能使它们在全球范围内可用。

因此，您必须从 app.module.ts 中删除 MdlModule 导入并将其导入 pages.module.ts。

's a related answer as you mentioned and here's a related issue on angular/material2.

模板解析错误：没有 "exportAs" 设置为 "mdlButton" 的指令

Template parse errors: There is no directive with "exportAs" set to "mdlButton"

angular

typescript

pug

material-design-lite

angular2-mdl