4

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

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

4

3 回答 3

4

MDL 绝对是文档记录更好的文档（我还没有找到关于 Angular2 Material 的任何好的文档）。我认为正因为如此，MDL 是（目前）更好的选择。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 并且有一些文档，我会切换到那个。

于 2016-06-16T08:15:42.443 回答
0

它完全在您的用例中。 您的项目会很快投入生产，还是有相当长的时间？您是否需要将 UI 组件定制到每个细节，还是非常通用？我已经研究了很多，由于我们投入生产的时间很短，所以我选择了 Bootstrap Material Design URL：mdbootstrap.com 原因：如果你使用 angular material 组件，那么首先它们处于 alpha 第二阶段，我的用例是非常定制的，例如，我正在调用休息服务来填充收音机、复选框等基础知识。

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

于 2016-06-16T13:10:36.850 回答
0

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

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

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

于 2016-07-27T18:03:33.247 回答