Material Angular2 应用程序中的 Design Lite (MDL) VS Angular2 Material

Question

YouTube 和其他学习网站上有一些 Angular2 教程，其中一些使用了 Material Design Lite (MDL)，一些使用了新的 Angular2 Material 用于演示目的。

考虑到 Angular2 Material 仍然很新（目前处于 Alpha 阶段）并且与 MDL 相比组件和文档的数量有限，这将是一个更好的选择来实现Angular2 在这个时间点以及每个特定于 Angular2 的 优点和缺点是什么？

Answer 1

MDL 绝对是有更好文档记录的（我没有在 Angular2 Material 上找到任何好的文档）。我认为因此，MDL 是 (currently) 更好的选择。 MDL 的缺点是它没有集成在 typescript/angular2 中。

如果您要在 Angular 2 组件模板中使用 MDL 组件，您可以从类似的东西扩展您的组件，以注册 MDL 组件：（否则 MDL 动画将无法工作，因为它们取决于 javascript)

declare var componentHandler: any;
export class MaterialTemplate {
    ngAfterViewInit(){
        componentHandler.upgradeAllRegistered();
    }
}

用法是这样的：

@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 {...}

一旦 Angular2 Material 不再是 alpha 并且有一些文档，我会切换到那个。

Answer 2

完全取决于您的用例。 您的项目会很快投入生产，还是有相当长的时间？您是否需要自定义 UI 组件到每个细节，或者它是否非常通用？我做了很多研究，由于我们投入生产的时间很短，所以我选择 Bootstrap Material 设计 URL : mdbootstrap.com 原因：如果你使用 angular material 组件，那么首先它们处于 alpha 秒，我的用例是非常定制的，例如我正在调用休息服务来填充无线电、复选框等基础知识。

要点，如果你时间紧迫需要大量定制，请使用 MDL（即使是流行的 Wijmo 5 ng2 组件现在也在使用它）或者你可以等待并选择angular2 material.

Answer 3

除了 Angular2-material 和 MDL，还有 MaterializeCSS，这是一个基于 material 设计的 CSS 框架。他们的官方网站位于 http://materializecss.com

它们比 MDL 或 Angular2-material 提供的工作组件要多得多，所有组件都带有示例和文档。

然而，MaterializeCSS 是基于 JQuery 的，即它需要 JQuery 来激活某些组件的动态行为。看看 https://www.npmjs.com/package/angular2-materialize。这个包恰好将这种动态行为添加到 Angular2 应用程序中。只需在 Angular2 组件中导入 MaterializeDirective 即可，它应该可以工作。

Material Angular2 应用程序中的 Design Lite (MDL) VS Angular2 Material

Material Design Lite (MDL) VS Angular2 Material in Angular2 app

material-design-lite

angular-material2

angular