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的导入并不能使它们全局可用。

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

Here如您所提及的相关答案以及here angular/material2上的相关问题。

模板解析错误：＆＃34; exportAs＆＃34;没有指令。设置为＆＃34; mdlButton＆＃34;

1 个答案: