Question

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

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

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

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

npm install angular2-mdl --save

显然就是这样......它应该有效。但它并没有。我已经达到了使用MDL的组件正确设置风格的程度，但动画的JavaScript根本不会触发。我理解这是因为MDL在Angular加载它之前正在扫描页面中的DOM元素，因此尝试了刷新DOM＆＃39;按照SO上所宣传的方式进行修复，但它对我不起作用：

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

控制台中没有错误，造型有效，而javascript没有。我想知道是否有人有这种设置/类似问题的经验？

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

由于

Answer 1

在你已经安装了angular-cli并创建了一个项目后使用以下命令安装material-desgin-lite：

.angular-cli.json

安装完成后，打开项目根目录下的"styles": ["../node_modules/material-design-lite/material.min.css"], "scripts": ["../node_modules/material-design-lite/material.min.js"],并添加以下行：

ng serve

保存文件并启动服务器：
int count = 0, sum = 0; printf("how many do you want to enter: "); scanf("%d", &count); int *num = malloc(sizeof(int)*count); for(int i = 0; i < count; i++) { scanf("%d ", &num[i]); //sum += num[i]; }

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

Answer 2

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

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

Angular2（angular-cli）和Material Design Lite（angular2-mdl）

2 个答案: