Angular2应用程序中的材料设计精简版（MDL）与Angular2材料

YouTube和其他学习网站上有一些Angular2教程，其中一些使用了Material Design Lite（MDL），一些使用了新的Angular2材料进行演示

---

考虑到Angular2材料仍然非常新（目前为Alpha），与MDL相比，其组件和文档数量有限，目前在Angular2中实施哪一个更好，以及每个特定于Angular2的优点和缺点是什么？

MDL肯定是一个更好的文档（我没有找到任何关于Angular2材料的好文档）。因此，我认为MDL（目前）是更好的选择。MDL的缺点是它没有集成在typescript/angular2中

如果您打算在Angular 2组件模板中使用MDL组件，您可以从以下内容扩展组件，以注册MDL组件：（否则MDL动画将无法工作，因为它们依赖于javascript）

用法如下：

@Component({
    selector: 'my-selector',
    template: `
        <form action="#">
        <div class="mdl-textfield mdl-js-textfield">
        <input value="{{bleh}}" class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">Text...</label>
        </div>
        <button (click)="action()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
        create
        </button>
        </form>`
})
export class CreateComponent extends MaterialTemplate {...}

@组件({
选择器：“我的选择器”，
模板：`
文本。。。
创造
`
})
导出类CreateComponent扩展MaterialTemplate{…}

---

一旦Angular2材料不在alpha中，并且有了一些文档，我会转而使用它。

这完全取决于您的用例。 您的项目将很快投入生产，还是有相当长的时间？ 您是否需要将UI组件定制到每个细节，还是非常通用？我已经做了很多研究，因为我们投入生产的时间很短，所以我选择Bootstrap Material Design URL:mdbootstrap.com 原因：如果你使用角材料组件，首先它们是alpha秒，我的用例是非常定制的，例如，我调用rest服务来填充基本功能，比如收音机、复选框

---

重点是，如果您的时间很短，需要大量定制，请使用MDL（甚至流行的Wijmo 5 ng2组件现在也在使用它），或者您可以等待并选择angular2材质。

除了angular2材质和MDL之外，还有MaterializeCS，它是一个基于材质设计的CSS框架。他们的官方网站位于

它们有比MDL或Angular2材料提供的更多的工作组件，所有这些都有示例和文档

然而，MaterializeCSS是基于JQuery的，即它需要JQuery来激活某些组件的动态行为。看一看。该软件包将这种动态行为添加到Angular2应用程序中。只需在Angular2组件中导入

MaterializeDirective

，它就可以工作了

@Component({
    selector: 'my-selector',
    template: `
        <form action="#">
        <div class="mdl-textfield mdl-js-textfield">
        <input value="{{bleh}}" class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">Text...</label>
        </div>
        <button (click)="action()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
        create
        </button>
        </form>`
})
export class CreateComponent extends MaterialTemplate {...}