Angular2 (angular-cli) 和 Material Design Lite (angular2-mdl)答案

【问题标题】：Angular2 (angular-cli) and Material Design Lite (angular2-mdl)Angular2 (angular-cli) 和 Material Design Lite (angular2-mdl)
【发布时间】：2017-06-18 14:39:11
【问题描述】：

我在使用 angular2-mdl 包启动 Angular2 项目时遇到了一些问题。

我的项目设置使用 angular-cli (webpack) - https://github.com/angular/angular-cli

我正在尝试使用 angular2-mdl 包 (https://www.npmjs.com/package/angular2-mdl) 集成 Google Material Design Lite (https://getmdl.io/started/index.html)。

angular2-mdl 设置步骤相当简单：

npm install angular2-mdl --save

显然就是这样......它应该可以工作。但事实并非如此。我已经到了使用 MDL 的组件样式正确的地步，但动画的 JavaScript 根本不会触发。我知道这是因为 MDL 在 Angular 加载它们之前扫描页面中的 DOM 元素，因此尝试了 SO 上宣传的“刷新 DOM”修复，但它对我不起作用：

ngAfterViewInit(){
    console.log("HeaderComponent.ngAfterViewInit");
    componentHandler.upgradeAllRegistered();
}

控制台中没有错误，样式有效，而 javascript 无效。我想知道是否有人对此设置/类似问题有经验？

附：我是 Angular2 的新手，真的不喜欢每个环境设置似乎都有的差异......有些使用 webpack，有些使用 systemjs，加载不同的生成器工具等......我一个人在这里吗？！

谢谢

【问题讨论】：

您是否按照步骤Add the MdlModule to your NgModule imports
顺便说一句，对于 Angular，我更喜欢这个 github.com/angular/material2/blob/master/guides/…
如果您使用 angular2-mdl，则不需要 componentHandler。请检查 plknr plnkr.co/edit/I3dLfLUDIH2xlEJqj0da?p=preview
嗨@michael，据我所知，componentHandler 是一种解决方法，它允许您将MDL UI 的各个部分拆分为单独的组件。到那时，我相信您需要解决方法来刷新 DOM 上的事件侦听器。
@TiepPhan 感谢您的回复，我不确定如何将 MdlModule 添加到您的 NgModule 导入中...您对此有什么建议吗？我也没有高兴地尝试了你的第二个包裹。值得注意的是，我正在尝试获取一个模板来使用该包：getmdl.io/templates/dashboard/index.html

标签： angular webpack material-design angular-cli angular2-mdl

【解决方案1】：

打开您的根模块，例如：AppModule，然后将MdlModule 添加到imports 数组中。

import { MdlModule } from 'angular2-mdl';
// other imports 
@NgModule({
  imports: [MdlModule],
  ...
})
export class AppModule { }

【讨论】：

【解决方案2】：

在您已经安装了 angular-cli 并创建了一个项目之后
安装材料设计精简版：

npm install material-design-lite --save

安装完成后，打开项目根目录下的.angular-cli.json 并添加以下行：

"styles":
["../node_modules/material-design-lite/material.min.css"],
"scripts":
["../node_modules/material-design-lite/material.min.js"],

保存文件并使用以下命令启动服务器：
ng serve

在您的代码中使用所需的 css 类和其他组件。

【讨论】：