angular 2.0 alpha 是否适用于 angular/material 项目中的组件？答案

【问题标题】：Does angular 2.0 alpha work with the components in angular/material Project?angular 2.0 alpha 是否适用于 angular/material 项目中的组件？
【发布时间】：2015-05-26 22:16:35
【问题描述】：

我一直试图让它工作，但一直没能。如果可能，请指点示例。

【问题讨论】：

angular 2 源代码包含一个正在进行的材料设计实现，可以使用 build.js.material 使用主 gulp 文件构建我相信github.com/angular/angular/blob/master/gulpfile.js#L1275 我看到它在不久前工作，它仍然在非常早期的阶段

标签： angular material-design

【解决方案1】：

当前版本的 angular-material 不适用于 angular 2.0，但我确信会有新的分支（或版本）与 angular 2.0 兼容。

【讨论】：

谢谢。当前的 angular-material css 是否适用于 Angular 2.0？
这篇文章已经一岁了。已经取得了一些进步，并且 angular-material-2 alpha-0 已经发布，并带有演示。 github.com/angular/material2

【解决方案2】：

团队正在开发 Angular Material 2.0 的移植版，您可以找到源代码here。

我创建了一个快速演示，展示了如何将它与 Angular 2 一起使用：

import {Component, View, bootstrap} from 'angular2/angular2';
import {MdInput, MdInputContainer} from 'angular2_material/material';

// Defines a new HTML tag <hello-ngconf>
@Component({
    selector: 'material-demo'
})
@View({
    template: `
    <md-input-container>
      <label>Your name</label>
      <input #newname />
    </md-input-container>
    <p>
      Hello, {{newname.value}}
    </p>
    `,
    directives: [MdInputContainer, MdInput]
})
class MaterialDemoComponent {
}

bootstrap(MaterialDemoComponent);

在this plunker 中查看实际操作。

您可以在the angular2 repo 中找到更多示例。

请注意，这仍然是 alpha 代码，功能不完整。例如，由于this issue，我无法让 MdButton 工作。

【讨论】：

谢谢。 @urish，当前的 angular-material css 是否适用于 Angular 2.0？
我没有尝试过，但即使尝试过，但团队目前不支持这个用例，所以我不推荐它
谢谢@urish .. 出于某种原因，它对我不起作用。这是工作演示：plnkr.co/edit/vSS7yMroAeTDHALG8eEg?p=preview
我认为事情发生了变化，所以 urish plunk 不再有效。 @Shidhin-Cr 出于某种原因，除了字体之外，您的 plunk 工作正常
你做了什么来使用它？没有 npm 存储库，因此无法使用 npm 命令安装 angular2_material。我不知道如何将它添加到我的 Angular 2 应用程序中。

【解决方案3】：

我知道这个问题很老，但我今天确实发现他们在 angular/material README 中有一个链接，指向他们专门为 angular/material 的 angular2 目标创建的存储库：https://github.com/angular/material2

它还在 alpha0 中。

作为一个建议，在 material2 启动之前，使用 http://www.getmdl.io/ 之类的东西可能会有所帮助。它可能让您更快地制作原型。

【讨论】：