如何在Angular 2中使用Angular Material？

Question

我尝试了 npm install angular-material --save 并按照这里的说明进行操作。接着我在index.html中添加了脚本和链接。

<script src="node_modules/angular-material/index.js"></script>
<link ref="stylesheet" href="node_modules/angular-material/modules/angular-material.css">

然后我尝试添加一个简单的<md-button>，但是没有成功。

- monty_lennie

---

请查看此网站 https://justindujardin.github.io/ng2-material/ - Eric Martinez

是的，并非所有组件（如Angular 1.x）都使用Angular Material来创建Angular2，但其中有一些已经被创建，这些在@EricMartinez提供的链接中有所提及。 - Pardeep Jain

Answer 1

自从这个问题被提出以来，Angular团队已经创建了“Angular 2材料设计”github项目：https://github.com/angular/material2 请参阅入门指南获取安装说明。

他们希望你（安装并）使用Angular CLI。

由于两个项目目前都处于alpha版本，下面的说明可能会随时间而改变。

# install the CLI globally
npm install -g angular-cli

# create a new project
ng new my-project

# install Angular Material 2 components
npm install --save @angular2-material/{core,button,card}

- Mark Rajcok

---

我知道这个答案是很久以前的了。我尝试使用Angular CLI的'ng new my-project'命令，然后在命令行中看到正在安装，但它花费了很长时间来安装，看起来就像永远都不会完成安装一样。有人遇到过同样的问题吗？ - shaw kwok

Answer 2

另一种选择是使用https://materializecss.com中的Materialize。

您只需将这些文件导入到位于src文件夹中的index.html中即可。

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

因此，您可以使用材料设计 例如：

 <label>
    <input type="checkbox" />
    <span>Red</span>
  </label>

- Charleston