Angular2(angular-cli)和Material Design Lite(angular2-mdl) [英] Angular2 (angular-cli) and Material Design Lite (angular2-mdl)

问题描述

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

I'm having some issues starting an Angular2 project using the angular2-mdl package.

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

My project setup is using angular-cli (webpack) - https://github.com/angular/angular-cli

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

I am trying to integrate Google Material Design Lite (https://getmdl.io/started/index.html) using the angular2-mdl package (https://www.npmjs.com/package/angular2-mdl).

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

The angular2-mdl setup steps are fairly simple:

npm install angular2-mdl --save

显然是这样...它应该可以工作.但事实并非如此.我已经指出使用MDL的组件的样式正确，但是动画的JavaScript根本无法启动.我了解这是因为MDL在Angular将页面加载到DOM元素之前正在扫描页面中的DOM元素，所以尝试按照SO上的说明尝试刷新DOM"修复，但对我不起作用:

Apparently that is it... and it should work. But it doesn't. I've got to a point where the components using MDL are styled correctly, but the JavaScript for animations doesn't fire at all. I understand this is because MDL is scanning the page for DOM elements before Angular loads them in, so have tried the 'refresh DOM' fix as advertised on SO but it's not working for me:

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

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

There are no errors in the console, the styling works and the javascript does not. I'm wondering if anyone has experience with this setup / similar issues?

P.s.我是Angular2的新手，真的不喜欢每种环境设置似乎都存在的差异...有些使用webpack，有些使用systemjs，负载了许多生成器工具，等等...我一个人在这里吗?！

P.s. I'm new to Angular2 and really not enjoying the differences every environment setup seems to have... with some using webpack, some using systemjs, loads of different generator tools etc... am I alone here?!

谢谢

推荐答案

在您已经安装angular-cli并创建了项目之后
使用以下命令安装material-desgin-lite:

after you already installed angular-cli and created a project
install material-desgin-lite with:

npm install material-design-lite --save

一旦完成安装，请在项目的根目录上打开.angular-cli.json并添加以下行:

Once intalled open the .angular-cli.json on the root directory of your project and add the following lines:

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

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

Save the file and the start the server with:
ng serve

在代码中使用所需的CSS类和其他组件.

Use the desired css classes and other components in your code.

这篇关于Angular2(angular-cli)和Material Design Lite(angular2-mdl)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！