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

Question

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

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

我试图整合谷歌材质设计精简版(https://getmdl.io/started/index.html使用angular2-MDL包()https://www.npmjs.com/package/angular2-mdl).

angular2-mdl设置步骤非常简单:

npm install angular2-mdl --save

显然就是这样......它应该有效.但事实并非如此.我已经到了使用MDL的组件正确设置样式的点,但动画的JavaScript根本不会触发.我理解这是因为MDL在Angular加载它们之前正在扫描页面中的DOM元素,所以尝试了在SO上宣传的"刷新DOM"修复,但它对我不起作用:

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

控制台中没有错误,样式工作和javascript没有.我想知道是否有人有这种设置/类似问题的经验？

Ps我是Angular2的新手,并且真的不喜欢每个环境设置似乎都有差异...有些使用webpack,有些使用systemjs,不同的生成器工具等等......我一个人在这里吗？!

谢谢

Answer 1

在您已经安装了angular-cli并创建了一个项目
安装material -desgin-lite之后:

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类和其他组件.