Angular2 (角度-cli)和材料设计精简版(角度2-mdl)

Question

我在使用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元素之前会扫描页面中的DOM元素，所以我尝试了广告中所说的“刷新DOM”修复，但它对我不起作用：

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

控制台中没有错误，样式可以工作，而javascript不能。我想知道是否有人有此设置/类似问题的经验？

附注：我刚接触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类和其他组件。

Answer 2

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

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