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 元素，所以尝试了 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?

附言我是 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屋！